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

Source: Internet
Author: User

Note:
Close, parent window Pop-up dialog box, child window closes directly
This. Response.Write ("<script language=javascript>window.close ();</script>");

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

Pop-up window refreshes the current page width=200 height=200 menu. menu bar, toolbar, address bar, status bar all No
This. Response.Write ("<script language=javascript>window.open (' rows.aspx ', ' newwindow ', ' width=200,height=200 ') </script> ");

Pop-up window refreshes 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 jumps to webform2.aspx page (in an IE window)
This. Response.Write ("<script Language=javascript>alert (' registered success '); window.window.location.href= ' WebForm2.aspx '; </script> ");

Closes the current child window, refreshes 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 refreshes 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. OK after popup subwindow (webform2.aspx)
This. Response.Write ("<script language= ' JavaScript ' >alert (' published successfully! '); window.open (' webform2.aspx ') </script> ");

Pop-up Prompt window, OK, refresh parent window
This. Response.Write ("<script>alert" was published successfully! ');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=n o, Status=no ')//This sentence should be written in one line
-
</SCRIPT>
  
Parameter explanation:
  
<script language= "javascript" > JS script start;
window.open the command that pops up the new window;
The filename of the ' page.html ' pop-up window;
The name of the ' NewWindow ' pop-up window (not the file name), not required, available empty ' ' instead;
height=100 window height;
width=400 window width;
The pixel value of the Top=0 window from the top of the screen;
The pixel value of the left=0 window from the left side of the screen;
Toolbar=no whether the toolbar is displayed, yes is displayed;
Menubar,scrollbars represents the menu bar and scroll bar.
Resizable=no whether the window size is allowed to change, yes is allowed;
Location=no whether the address bar is displayed, yes is allowed;
Status=no whether the information in the status bar is displayed (usually the file is already open), yes is allowed;
</SCRIPT> JS script End

' Newwin ': Hide menu bar Address bar toolbar
WIDTH=50: Width
HEIGHT=50: Height
Scrollbars=yes/no: Scroll bar
TOP=50: Window from top of screen
LEFT=50: Window from the left side of the screen
Example: window.open (' detail.aspx?id= ' +e.item.cells[1]. text+ "', ' newwin ', ' width=750,height=600,scrollbars=yes,top=50,left=50 ');");
This. Response.Write ("<script>window.open" (' webform2.aspx ', ' ', ' toolbar=no,location=no,directories=no,status=no, Menubar=no,scrollbars=no,resizable=yes,width=750,height=470,left=80,top=40 ');</script> ");

Cases:
This. Response.Write ("<script>alert" was published successfully! ');window.opener.location.href=window.opener.location.href;</script> ");
This. Response.Write ("<script>");
This. Response.Write ("{Top.opener =null;top.close ();}");
This. Response.Write ("</script>");

Example: Linkcolumn1. datanavigateurlformatstring= "Javascript:varwin=window.open (' edit_usr.aspx?actid={0} ', ' Newwin ', ' width=750, Height=600,scrollbars=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> ");

Popup is not related to the menu toolbar in your current window, just write a script in the page and it pops up. Like
<a href=# onclick= "window.open (' xxx.aspx ', ' Window name ', ' parameters ');" >xxxxx</a>

The following is a list of some pop-up window parameters, you can set the parameters, 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 (for example: "Fullscreen=yes, Toolbar=yes"). The following are the various features that are supported.
Channelmode = {Yes | no | 1 | 0} Whether the ladder mode is displayed in the window. The default is No.
directories = {Yes | no | 1 | 0} Displays the various buttons in the window. The default is yes.
fullscreen = {Yes | no | 1 | 0} whether the browser is displayed 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 browsing window. ALT+F4 can close the window. A full-screen window must use the ladder (channelmode) mode.
Height = number Specifies the height of the window, in pixels. The minimum value is 100.
left = number Specifies the distance, in pixels, of the window from the border of the box. The value must be greater than or equal to 0.
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 a window. The default is yes.
resizable = {Yes | no | 1 | 0} Specifies whether a handle that can be resized by the user is displayed in the window. The default is yes.
scrollbars = {yes | no | 1 | 0} Specifies whether to display a horizontal or vertical scroll bar 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. In the case of a non-invoking HTML application or a dialog box, this item is ignored. The default is yes.
toolbar = {Yes | no | 1 | 0} Specifies whether the toolbar is displayed in a window, including buttons such as forward, back, stop, and so on. The default is yes.
top = number Specifies the position of the top of the window, in pixels. The value must be greater than or equal to 0.
width = number Specifies the width of the window, in pixels. The minimum value is 100.

"1, the most basic popup window code"
  
<script language= "JavaScript" >
<!--
window.open (' page.html ')
-
</SCRIPT>
  
Because this is a javascripts code, they should be placed between <script language= "JavaScript" > tags and </script>. <!--and is useful for browsers with low versions, where the code in the tags is not displayed as text in these old browsers. It's a good habit to develop. window.open (' page.html ') is used to control the popup new window page.html, if page.html is not in the same path as the main window, the path, absolute path (http://) and relative path (. /) are available. You can use both single and double quotes, just don't mix. This section of code can be added anywhere in the HTML,
"2, after setting the popup window"
  
Let's talk about the settings for the popup window. Just add a little something to the code above. Let's customize the appearance of this pop-up window, size, pop-up position to fit the specific situation 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=n o, Status=no ')//This sentence should be written in one line
-
</SCRIPT>
  
Parameter explanation:
  
<script language= "javascript" > JS script start;
window.open the command that pops up the new window;
The filename of the ' page.html ' pop-up window;
The name of the ' NewWindow ' pop-up window (not the file name), not required, available empty ' ' instead;
height=100 window height;
width=400 window width;
The pixel value of the Top=0 window from the top of the screen;
The pixel value of the left=0 window from the left side of the screen;
Toolbar=no whether the toolbar is displayed, yes is displayed;
Menubar,scrollbars represents the menu bar and scroll bar.
Resizable=no whether the window size is allowed to change, yes is allowed;
Location=no whether the address bar is displayed, yes is allowed;
Status=no whether the information in the status bar is displayed (usually the file is already open), yes is allowed;
</SCRIPT> JS script End

"3. Use function to control popup window"
  
The following is a complete code.
<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 ")//write a line
}
-
</script>
<body onload= "Openwin ()" >
Any page content ...
</body>

A function Openwin () is defined here, and the function content is to open a window. There is no use before calling it. How to invoke it?

Method One: <body onload= "Openwin ()" > Browser to read the page when the pop-up window;
Method Two: <body onunload= "Openwin ()" > Pop-up window when the browser leaves the page;
Method Three: Call with a connection:
<a href= "#" onclick= "Openwin ()" > Open a Window </a>
Note: The "#" used is a virtual connection.
Method Four: Call with a button:
<input type= "button" onclick= "Openwin ()" value= "open Window" >

"4, pop up 2 windows at the same time"
  
Change the source code slightly:
  
<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=n O, Status=no ")//write a line
window.open ("page2.html", "NewWindow2", "height=100, width=100, Top=1 xx, Left=100,toolbar=no, Menubar=no, scrollbars= No, Resizable=no, Loca Tion=no, Status=no ")//write a line
}
-
</script>
To avoid the pop-up of the 2 window overlay, use top and left to control the pop-up position do not cover each other. Finally, the four methods mentioned above can be called.
Note: The name of the 2 windows (NewWindows and NewWindow2) is not the same, or altogether empty.

"5, main window open file 1.htm, while pop-up small window page.html"

Add the following code to the main window <script language= "JavaScript" >
<!--
function Openwin () {
window.open ("page.html", "", "width=200,height=200")
}
-
</script>
Join <body> Area:
<a href= "1.htm" onclick= "Openwin ()" >open</a>.

"6, pop-up window timing close Control"
  
Let's take some control of the popup window, and the effect will be better. If we add a little piece of code to the pop-up page (note that it's added to the page.html HTML, not the main page), is it even cooler to turn it off automatically after 10 seconds?
First, add the following code to the <script language= "JavaScript" >
function Closeit ()
{
SetTimeout ("Self.close ()", 10000)//MS
}
</script>
Then, and then use <body onload= "Closeit ()" > This sentence instead of page.html Zhongyuan Some <BODY> this sentence can be. (This sentence must not forget to write Ah!) The function of this sentence is to invoke the code that closes the window, and then close the window on its own after 10 seconds. )

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

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.