JS Popup window summarizes 6 kinds of pop-up windows methods

Source: Internet
Author: User
Note:
/ / Close, the parent window pops up a dialog box, the child window is closed directly
this.Response.Write("<script language=javascript>window.close();</script>");

/ / Close, the parent window and the child window do not pop up a dialog box, close directly
this.Response.Write("<script>");
this.Response.Write("{top.opener =null;top.close();}");
this.Response.Write("</script>");

// Popup window refreshes the current page width=200 height=200 menu. Menu bar, toolbar, address bar, status bar
this.Response.Write("<script language=javascript>window.open(‘rows.aspx‘,‘newwindow‘,‘width=200, height=200‘)</script>”);

/ / pop-up window to refresh the current page
this.Response.Write("<script language=javascript>window.open(‘rows.aspx‘)</script>");
this.Response.Write("<script>window.open(‘WebForm2.aspx‘,‘_blank‘);</script>”);

/ / pop-up prompt window jumped to the webform2.aspx page (in an IE window)
this.Response.Write(" <script language=javascript>alert(‘registration success ‘); window.window.location.href=‘WebForm2.aspx‘;</script> ");

/ / Close the current child window, refresh the parent window
this.Response.Write("<script>window.opener.location.href=window.opener.location.href;window.close();</script>");
this.Response.Write("<script>window.opener.location.replace(window.opener.document.referrer);window.close();</script>");

/ / Child window refresh parent window
this.Response.Write("<script>window.opener.location.href=window.opener.location.href;</script>");
this.Response.Write("<script>window.opener.location.href=‘WebForm1.aspx‘;</script>");

/ / pop-up prompt window. After confirming pop-up child window (WebForm2.aspx)
this.Response.Write("<script language=‘javascript‘>alert(‘post success!’); window.open(‘WebForm2.aspx‘)</script>”);

/ / pop-up prompt window, after confirmation, refresh the parent window
this.Response.Write("<script>alert('Publish success!');window.opener.location.href=window.opener.location.href;</script>");

// pop up the same page
<INPUT type="button" value="Button" onclick="javascript:window.open(window.location.href)">

//
Response.Write("parent.mainFrameBottom.location.href=‘yourwebform.aspx?temp=" +str+"‘;");


< SCRIPT LANGUAGE="javascript">
< !--
Window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no , status=no') //This sentence is to be written as a line
-->
< /SCRIPT>

Parameter explanation:

<SCRIPT LANGUAGE="javascript"> The js script starts;
Window.open The command to pop up a new window;
The file name of the ‘page.html’ popup;
‘newwindow‘ pop-up window name (not the file name), not required, available empty ‘replace;
Height=100 window height;
Width=400 window width;
Top=0 The pixel value of the window from the top of the screen;
Left=0 The pixel value of the window from the left side of the screen;
Toolbar=no Whether to display the toolbar, yes to display;
Menubar, scrollbars represents the menu bar and scroll bar.
Resizable=no Whether to allow the window size to be changed, yes is allowed;
Location=no Whether to display the address bar, yes is allowed;
Status=no Whether to display the information in the status bar (usually the file is already open), yes is allowed;
</SCRIPT> js script ends

‘newwin‘: Hide menu bar address bar toolbar
Width=50: width
Height=50: height
Scrollbars=yes/no: scrollbar
Top=50: window is above the screen
Left=50: window is from the left side of the screen

Example: window.open('detail.aspx?ID="+e.Item.Cells[1].Text+"','newwin','width=750,height=600,scrollbar=yes,top=50,left= 50');window.close()";


this.Response.Write("<Script>window.open('WebForm7.aspx','','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable= Yes,width=750,height=470,left=80,top=40');</script>");

Pop-up has nothing to do with whether or not your current window has a menu toolbar. You just need to write a script on the page and it pops up.
<a href=# onclick="window.open(‘xxx.aspx‘, 'window name ‘, ‘parameter ‘); ">xxxxx</a>

The parameters of some pop-up windows are listed below. You can set them yourself. The parameters are separated by commas.

Optional. String -- Lists the object tables and separates them with commas. Each item has its own value and they will be separated (eg "fullscreen=yes, toolbar=yes"). Below are the various features that are supported.
Channelmode = { yes | no | 1 | 0 } Whether to display the ladder mode in the window. The default is no.
Directories = { yes | no | 1 | 0 } Whether to display various buttons in the window. The default is yes.
Fullscreen = { yes | no | 1 | 0 } Whether to display the browser in full screen mode. The default is no. You need to be very careful when using this feature. Because this property may hide the browser's title bar and menu, you must provide a button or other hint to help the user close the browser window. ALT+F4 can close the window. A full screen window must use the channel mode.
Height = number Specifies the height of the window in pixels. The minimum value is 100.
Left = number Specifies the distance of the window from the left border, in pixels. The value must be greater than or equal to zero.
Location = { yes | no | 1 | 0 } Specifies whether the address bar is displayed in the window. The default is yes.
Menubar = { yes | no | 1 | 0 } Specifies whether the menu bar is displayed in the window. The default is yes.
Resizable = { yes | no | 1 | 0 } Specifies whether to display a handle that can be resized by the user in the window. The default is yes.
Scrollbars = { yes | no | 1 | 0 } Specifies whether horizontal or vertical scroll bars are displayed in the window. The default is yes.
Status = { yes | no | 1 | 0 } Specifies whether the status bar is displayed in the window. The default is yes.
Titlebar = { yes | no | 1 | 0 } Specifies whether the title bar is displayed in the window. This item will be ignored if the HTML Application or a dialog is not called. The default is yes.
Toolbar = { yes | no | 1 | 0 } Specifies whether to display the toolbar in the window, including buttons such as forward, back, stop, and so on. The default is yes.
Top = number Specifies the position at the top of the window, in pixels. The value must be greater than or equal to zero.
Width = number Specifies the width of the window in pixels. The minimum value is 100.

[1, the most basic pop-up window code]

<SCRIPT LANGUAGE="javascript">
<!--
Window.open (‘page.html‘)
-->
</SCRIPT>

Because this is a piece of javascripts code, they should be placed between <SCRIPT LANGUAGE="javascript"> tags and </script>. <!-- and --> are for some low-version browsers, and the code in the tag will not be displayed as text in these old browsers. To develop this good habit. Window.open ('page.html') is used to control the pop-up of the new window page.html. If page.html is not in the same path as the main window, the path should be written in front, absolute path (http://) and relative The path (../) can be. You can use single quotes and double quotes, just don't mix them. This piece of code can be added to any position in the HTML. Between <head> and </head>, <body> </body> can also be executed earlier and earlier, especially if the page code is long and you want to make the page pop up earlier. Just try to move forward.

[2, after the set pop-up window]

Let's talk about the settings of the pop-up window. Just add a little more to the code above. Let's customize this pop-up window


Appearance, size, and pop-up position to suit the specifics of the page.

<SCRIPT LANGUAGE="javascript">
<!--
Window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no , status=no') //This sentence is to be written as a line
-->
</SCRIPT>

Parameter explanation:

<SCRIPT LANGUAGE="javascript"> The js script starts;
Window.open The command to pop up a new window;
The file name of the ‘page.html’ popup;
‘newwindow‘ pop-up window name (not the file name), not required, available empty ‘replace;
Height=100 window height;
Width=400 window width;
Top=0 The pixel value of the window from the top of the screen;
Left=0 The pixel value of the window from the left side of the screen;
Toolbar=no Whether to display the toolbar, yes to display;
Menubar, scrollbars represents the menu bar and scroll bar.
Resizable=no Whether to allow the window size to be changed, yes is allowed;
Location=no Whether to display the address bar, yes is allowed;
Status=no Whether to display the information in the status bar (usually the file is already open), yes is allowed;
</SCRIPT> js script ends

[3, use the function to control the pop-up window]

Below is a complete code.
<html>
<head>
<script LANGUAGE="JavaScript">
<!--
Function openwin() {
Window.open ("page.html", "newwindow", "height=100, width=400, toolbar =no, menubar=no, scrollbars=no, resizable=no, location=no, status=no") // Written into a line
}
//-->
</script>
</head>
<body onload="openwin()">
Any page content...
</body>
</html>

This defines a function openwin(), the function content is to open a window. There is no use before calling it. How to call it?

Method 1: <body onload="openwin()"> The browser pops up when reading the page;
Method 2: <body onunload="openwin()"> The browser pops up when leaving the page;
Method three: call with a connection:
<a href="#" onclick="openwin()">Open a window</a>
Note: The "#" used is a virtual link.
Method four: Call with a button:
<input type="button" onclick="openwin()" value="Open the window">

[4, 2 windows pop up at the same time]

Make a slight change to the source code:

<script LANGUAGE="JavaScript">
<!--
Function openwin() {
Window.open ("page.html", "newwindow", "height=100, width=100, top=0, left=0,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no , status=no") / / write a line
Window.open ("page2.html", "newwindow2", "height=100, width=100, top=1 00, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, loca tion =no, status=no") / / write a line
}
//-->
</script>
In order to avoid the two window overlays popped up, use top and left to control the pop-up position and do not overwrite each other. Finally, you can use the four methods mentioned above to call.
Note: The names of the two windows (newwindows and newwindow2) are not the same, or they are all empty.
  
[5, the main window opens the file 1.htm, and pops up the small window page.html]

Add the following code to the <head> area of the main window:
<script language="javascript">
<!--
Function openwin() {
Window.open("page.html","","width=200,height=200")
}
//-->
</script>
Join the <body> area:
<a href="1.htm" onclick="openwin()">open</a>.
  
[6, the timing of the pop-up window is closed]

Now let's take some control over the pop-up window, the effect is even better. If we add a small piece of code to the popup page (note that it is added to the HTML of page.html, not the main page), is it even cooler to let it automatically close after 10 seconds?
First, add the following code to the <head> section of the page.html file:
<script language="JavaScript">
Function closeit()
{
setTimeout("self.close()",10000) //ms
}
</script>
Then, use <body onload="closeit()"> instead of the original <BODY> in page.html. (Do not forget to write this sentence! The purpose of this sentence is to call the code that closes the window, and close the window itself after 10 seconds.)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.