Home > Developer > Web Develop
Window. open () method (pop-up layer), window. open pop-up
1. The most basic pop-up window code
Required parameter open('page.html ');
2. After setting, the pop-up window is displayed.
Optional values open('page.html ', 'newwindow', 'height = 100, width = 400, top = 0, left = 0, toolbar = no, menubar = no, scrollbars = no, resizable = no, location = no, status = no') // write this sentence as a line of code
Parameter description:
Window. open command to pop up a new window;
'Page.html 'name of the pop-up window;
'Newwindow' indicates the name of the pop-up window (not the file name). It is optional and can be replaced by null;
Height = 100 window height;
Width = 400 window width;
Top = the pixel value between the 0 window and the top of the screen;
Left = 0 the pixel value between the window and the left of the screen;
Toolbar = no indicates whether to display the toolbar. yes indicates display;
Menubar and scrollbars indicate the menu bar and scroll bar.
Resizable = no: whether to change the window size. yes: yes;
Location = no indicates whether the address bar is displayed. yes indicates yes;
Status = no whether to display the information in the status bar (usually the file has been opened), yes is allowed;
3. Use Function Control to bring up a window
The following is a complete piece of 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 ") // write a row
}
// -->
</Script>
</Head>
<Body onload = "openwin ()">
Any page content...
</Body>
</Html>
Explanation: An openwin () function is defined here. The function content is to open a window. There is no purpose before calling it. How to call it?
Method 1: <body onload = "openwin ()"> A window pops up when the browser reads the page;
Method 2: <body onunload = "openwin ()"> A window pops up when the browser leaves the page;
Method 3: call with a connection:
<A href = "#" onclick = "openwin ()"> open a window. </a>
Note: "#" is a virtual connection.
Method 4: call with a button:
<Input type = "button" onclick = "openwin ()" value = "open window"/>
4. Two windows are displayed.
Slightly changed the code as follows:
<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 row
Window. open ("page2.html", "newwindow2", "height = 100, width = 100, top = 100, left = 100, toolbar = no, menubar = no, scrollbars = no, resizable = no, loca tion = no, status = no ") // write a row
}
// -->
</Script>
To avoid overwriting the two pop-up windows, use top and left to control the position of the pop-up window. Finally, we can call the four methods mentioned above.
Note: The names of the two windows (newwindow and newwindow2) must not be the same, or they are all empty.
5. open the file 1.htmin the main window, and pop up the window page.html at the same time.
Add the following code to the Function openwin ()
{
Window. open ("page.html", "", "width = 200, height = 200 ")
}
Add to the body area:
<A href = "1.htm" onclick =" openwin () "> open </a>.
6. timed close control of the pop-up window
Add the field code to the displayed page (the page is added to the HTML of page.html, not the home page, otherwise ......). Is it cool to enable it to be automatically disabled in 10 seconds?
Function closeit ()
{
SetTimeout ("selft. close ()", 10000) // millisecond
}
Then, add <body onload = "closeit ()"> to the body.
7. Add a closed button in the pop-up window.
<Input type = "button" value = "close" onclick = "window. close ()">
8. included pop-up window-one page and two windows
The preceding example contains two windows: one is the main window and the other is the small window that appears. Through the example below, you can complete the above effect on a page.
<Html>
<Head>
<Script language = "JavaScript">
Function openwin ()
{
OpenWindow = window. open ("", "newwin", "height = 250, width = 250, toolbar = no, scrollbars =" + scroll + ", menubar = no ");
// Write a row
Opendeskdoc ument. write ("<TITLE> example </TITLE> ")
Openmediaworkflow Doc ument. write ("<body bgcolor = # ffffff> ")
Openmediaworkflow Doc ument. write ("Openmediaworkflow Doc ument. write ("New window opened! ")
Openmediaworkflow Doc ument. write ("</BODY> ")
Openmediaworkflow Doc ument. write ("</HTML> ")
Openmediaworkflow Doc ument. close ()
}
</SCRIPT>
</Head>
<Body>
<A href = "#" onclick = "openwin ()"> open a window. </a>
<Input type = "button" onclick = "openwin ()" value = "open window">
</Body>
</Html>
Isn't the code in openmediaworkflow Doc ument. write () standard HTML? You only need to write more rows according to the format. An error occurs when you add one or more labels. Remember to end with openmediaworkflow Doc ument. close.
9. The ultimate application-the pop-up window that controls the Cookie
Recall that the pop-up window above is cool, but it has a slight problem. For example, if you place the above script in a page that requires frequent passing (such as the homepage), refresh the page each time, the window will pop up once. Is it very annoying?
Is there a solution? We can use cookies for control.
First, add the following code to the Html head area on the home page:
Function openwin (){
Window. open ("page.html", "", "width = 200, height = 200 ")
}
Function get_cookie (Name)
{
Var search = Name + "= ";
Var returnvalue = "";
If (document. cookie. length> 0 ){
If (offset! =-1 ){
Offset + = search. length
End = document. cookie. indexOf (";", offset );
If (end =-1)
End = document. cookie. length;
Returnvalue = unescape (document. cookie. substring (offset, end ));
}
}
Return returnvalue;
}
Function ladpopup ()
{
If (get_cookie ('pped = yes '))
{
Openwin ()
Document. cookie = "popped = yes ";
}
}
Finally, use <body onload = "loadpopup ()">
The code for parent. aspx is as follows:
<% @ Page Language = "C #" AutoEventWireup = "true" CodeFile = "pop-up window. aspx. cs" Inherits = "pop-up window" %> <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
The ChildWin. aspx code is as follows:<% @ Page Language = "C #" AutoEventWireup = "true" CodeFile = "ChildWin. aspx. cs" Inherits = "ChildWin" %> <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
