[1. The most basic pop -up window code]
Copy code code as follows:
<Script language = "javascript">
<!--
Window.open ('Page.html')
->
</Script>
Because it is a section of JavaScripts code, they should be placed between the <script language = "javascript"> tags and </script>. <!-and-> play a effect on some low-versions of browsers. In these old browsers, the code in the label will not be displayed as text. To develop this good habit. Window.open ('Page.html') is used to control the pop -up new window page.html. Path (../) can be available. Both single quotes and dual quotes can be used, just do not mix. This code can be added to any position of HTML, <head> and </head> can be, <body> </body> can also be executed, especially the page code is long, and you want to make the page pop up earlier Try to put it forward.
[2. The pop -up window after setting]
Let's talk about the settings of the pop -up window. Just add something to the code above. Let's customize the appearance, size, and pop -up position of the pop -up window to adapt to the specific situation of the page.
Copy code code as follows:
<Script language = "javascript">
<!--
Window.open ('Page.html', 'Newwindow', 'Height = 100, Width = 400, TOP = 0, LEFT = 0, Toolbar = No, Menubar = no, Scrollbars = NO, Resizable = NO, L, L, L, L, L, L, L, L, L, L, L, L, L, L, L, L, L, L, L Ocation = no , status = no ') //
->
</Script>
Parameter explanation:
<Script language = "javascript"> js script starts;
Window.open pops up the command of the new window;
'Page.html' pop -up window file name;
'Newwindow' The name of the pop -up window (not file name), non -required, can be replaced by empty '';
Height = 100 window height;
width = 400 window width;
TOP = 0 window distance from the top of the screen;
LEFT = 0 Window is a pixel value from the left side of the screen;
Toolbar = No to display the toolbar, yes is displayed;
Menubar, scrollbars represent menu bar and rolling bar.
Resizable = No allows to change the window size, yes is allowed;
Location = No to display the address bar, yes is allowed;
Status = No to display the information in the status bar (usually the file has been opened), yes is allowed;
</Script> js script ends
[3. Control the pop -up window with a function]
Below is a complete code.
Copy code code as follows:
<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," ) // Write a line
}
//->
</script>
</head>
<body only = "openwin ()">>
Any page content ...
</body>
</html>
A function Openwin () is defined here, and the function content is to open a window. There is no use before calling it. How to call?
Method 1: <body online = "openwin ()"> When the browser reads the page, the window pops up;
Method two: <body onunload = "openwin ()"> The browser pops up when the browser leaves the page;
Method 3: Use one connection to call:
<a href = "#" OnClick = "Openwin ()"> Open a window </a>
Note: The "#" used is a virtual connection.
Method 4: Use a button to call:
<input type = "Button" onClick = "Openwin ()" Value = "Open the window">>
[4, 2 windows pop up at the same time]
Slightly change the source code:
Copy code 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, local = NO , status = no ") //
Window.open ("Page2.html", "Newwindow2", "Height = 100, Width = 100, TOP = 1 00, LEFT = 100, TOOLBAR = no, Menubar = no, ScrolLBars = no, Resizable = no, L, L, L, L, L, L, L, L, l OCA Tion = no, status = no ") //
}
//->
</script>
To avoid the two window coverage, control the pop -up position with TOP and LEFT should not cover each other. Finally, just call the four methods mentioned above.
Note: Don't be the same, or simply empty, or simply empty.
[5. Open the file in the main window 1.htm, and the small window page.html pops up at the same time]
As shown in the following code, add the main window <head> area:
Copy code code as follows:
<script language = "javascript">
<!--
function openwin () {) {
Window.open ("Page.html", "", "Width = 200, Height = 200")
}
//->
</script>
Add <body> Area:
<A href = "1.htm" onClight = "Openwin ()"> Open </a>.
[6. Conflicted shutdown control of the pop -up window]
Let's control the pop -up window below, and the effect is even better. If we add a short code to the pop -up page (note that it is the html of adding page.html, it is not on the home page, otherwise ...), is it cooler to let it automatically close after 10 seconds?
First, add the following code to the <head> area of the page.html file:
Copy code code as follows:
<script language = "javascript">
Function Closeit ()
{{
settimeout ("seld.close ()", 10000) // milliseconds
}
</script>
Then, use <body online = "closeit ()"> to replace the original <body> sentence in Page.html. (Don't forget to write this sentence! The role of this sentence is to call the code of the closing window, and close the window by yourself after 10 seconds.)
[7. Add a closed button to the pop -up window]
<FORM>
<Input type = 'Button' Value = 'Close' OnClick = 'Window.close ()'>
</Form>
Haha, it's more perfect now!
[8. The pop-up window contained in it-one page and two windows]
The above examples include two windows, one is the main window, and the other is a small window. Through the following example, you can complete the above effect on one page.
Copy code code as follows:
<html>
<head>
<Script language = "javascript">
Function Openwin ()
{{
Openwindow = window.open ("", "newwin", "height = 250, width = 250, toolbar = no, scrollbars ="+scroll+", menubar = no"));
// Write into a line
Openwindow.document.write ("<Title> Example </Title>")
Openwindow.document.write ("<body bgcolor =#ffffff>")
Openwindow.document.write ("<h1> Hello! </H1>")
Openwindow.document.write ("New Window Opened!")
Openwindow.document.write ("</body>")
Openwindow.document.write ("</html>")
Openwindow.document.close ()
}
</Script>
</head>
<body>
<a href = "#" OnClick = "Openwin ()"> Open a window </a>
<input type = "Button" onClick = "Openwin ()" Value = "Open the window">
</body>
</html>
Look at the code in OpenWindow.document.write () Isn't the standard HTML? Just write more lines in the format. Pay attention to an error with one more label or less label. Remember to end it with openwindow.document.close ().
[9. Ultimate Application-COOKIE Control of the Popular Window]
Recall that although the pop -up window above is cool, there is a small problem (immersed in joy, you must not find it?) For example, you put the above script on a page that needs to be passed frequently (such as the homepage), then every one, then every This page refreshes this page, the window will pop up once, isn't it very annoying? :-_
Is there a solution? Yes! ;-) Follow me. We can use cookies to control it.
First, add the following code to the <head> area of the homepage HTML:
Copy code code as follows:
<script>
function openwin () {) {
Window.open ("Page.html", "", "Width = 200, Height = 200")
}
Function get_cookie (name) {
var search = name + "="
var returnValue = "";
if (document.cookie.Length> 0) {{
Offset = document.cookie.indexof (search)
if (offset! = -1) {{
Offset += Search.length
end = document.cookie.indexof (";", offset);
if (end == -1)
end = document.cookie.length;
ReturnValue = UNESCAPE (Document.cookie.Substring (Office, END))
}
}
Return Returnvalue;
}
function loadpopup () {
ifT_Cookie ('Popped') == '') {{
openwin ()
document.cookie = "Popped = yes"
}
}
</script>
Then, use <body online = "loadpopup ()"> (note that it is not openwin but loadpop!) Replace the original <body> sentence in the homepage. You can try to refresh this page or enter the page again, and the window will never pop up. Real Pop-only-One!