【1. The most basic pop-up window code】
Copy the codeThe code is as follows:
<SCRIPT LANGUAGE="javascript">
<!--
('')
-->
</SCRIPT>
Because it is a piece of javascripts code, they should be placed between the <SCRIPT LANGUAGE="javascript"> tag and </script>. <!-- and --> are useful for some low-version browsers, in which the code in the tag is not displayed as text. You need to develop this good habit. ('') is used to control the pop-up of a new window. If it is not in the same path as the main window, the path should be written in front, both the absolute path (http://) and the relative path (../) are OK. It is OK to use single and double quotes, but don't mix them. This piece of code can be added to any location in HTML, between <head> and </head>, and between <body> and </body>, and the earlier it is executed, especially if the page code is long, try to put it forward if you want the page to pop up early.
[2. Pop-up window after setting]
Let’s talk about the settings of the pop-up window. Just add a little more to the above code. Let's customize the appearance, size, and position of this pop-up window to suit the specific situation of the page.
Copy the codeThe code is as follows:
<SCRIPT LANGUAGE="javascript">
<!--
('', '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 as one line
-->
</SCRIPT>
Parameter explanation:
<SCRIPT LANGUAGE="javascript"> js script start;
The command to pop up a new window;
'' The file name of the pop-up window;
'newwindow' The name of the pop-up window (not the file name), if not required, it can be replaced by empty '';
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 to the left of the screen;
toolbar=no Whether to display the toolbar, yes is the display;
menubar, scrollbars means menu bar and scrollbar.
resizable=no Whether to allow changing the window size, yes is allowed;
location=no Whether to display the address bar, yes is allowed;
status=no Whether to display information in the status bar (usually the file is already open), yes is allowed;
</SCRIPT> js script end
【3. Use functions to control pop-up windows】
Here is a complete code.
Copy the codeThe code is as follows:
<html>
<head>
<script LANGUAGE="JavaScript">
<!--
function openwin() {
("", "newwindow", "height=100, width=400, toolbar =no, menubar=no, scrollbars=no, resizable=no, location=no, status=no") //Write it as a line
}
//-->
</script>
</head>
<body onload="openwin()">
Any page content...
</body>
</html>
Here is a function openwin() defined, and the function content is to open a window. No use until it is called. How to call it?
Method 1: <body onload="openwin()"> A pop-up window is displayed when the browser reads the page;
Method 2: <body onunload="openwin()"> A pop-up window appears when the browser leaves the page;
Method 3: Call with a connection:
<a href="#" onclick="openwin()">Open a window</a>
Note: The "#" used is a virtual connection.
Method 4: Call with a button:
<input type="button" onclick="openwin()" value="Open Window">
【4. Two windows pop up at the same time】
Slightly change the source code:
Copy the codeThe code is as follows:
<script LANGUAGE="JavaScript">
<!--
function openwin() {
("", "newwindow", "height=100, width=100, top=0, left=0,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=n o, status=no")//Write as one line
("", "newwindow2", "height=100, width=100, top=1 00, left=100, toolbar=no, menubar=no, scrollbars=no, resizable=no, loca tion=no, status=no")//Write it as a line
}
//-->
</script>
To avoid overwriting the two windows that pop up, use top and left to control the popup position and do not overwrite each other. Finally, use the four methods mentioned above to call it.
Note: The names of the two windows (newwindows and newwindow2) should not be the same, or they are all empty.
[5. Open the file in the main window and pop up a small window at the same time]
The following code is added to the main window <head> area:
Copy the codeThe code is as follows:
<script language="javascript">
<!--
function openwin() {
("","","width=200,height=200")
}
//-->
</script>
Join the <body> area:
<a href="" onclick="openwin()">open</a>.
【6. Timed closing control of pop-up window]
Let’s take some control over the pop-up window, and the effect will be even better. If we add a small piece of code to the pop-up page (note that it is added to the HTML, not the main page, otherwise...), wouldn't it be cooler to let it close automatically after 10 seconds?
First, add the following code to the <head> area of the file:
Copy the codeThe code is as follows:
<script language="JavaScript">
function closeit()
{
setTimeout("()",10000) //ms
}
</script>
Then, just use the sentence <body onload="closeit()"> to replace the sentence "Zhongyuan <BODY>. (Don't forget to write this sentence! The purpose of this sentence is to call the code to close the window, and close the window yourself after 10 seconds.)
【7. Add a close button to the pop-up window】
<FORM>
<INPUT TYPE='BUTTON' VALUE='Close' onClick='()'>
</FORM>
Haha, it’s more perfect now!
【8. Pop-up windows included - two windows per page]
The above examples all contain two windows, one is the main window and the other is the pop-up window. With the following example, you can complete the above effect in a page.
Copy the codeThe code is as follows:
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
function openwin()
{
OpenWindow=("", "newwin", "height=250, width=250,toolbar=no ,scrollbars="+scroll+",menubar=no");
//Write it as a line
("<TITLE>Example</TITLE>")
("<BODY BGCOLOR=#ffffff>")
("<h1>Hello!</h1>")
("New window opened!")
("</BODY>")
("</HTML>")
()
}
</SCRIPT>
</head>
<body>
<a href="#" onclick="openwin()">Open a window</a>
<input type="button" onclick="openwin()" value="Open Window">
</body>
</html>
Let's see if the code in() is just standard HTML? Just write more lines in the format. Be careful that if one more label or one less label will cause errors. Remember to end with ().
[9. Ultimate application--Cookie control of pop-up windows]
Recall that although the pop-up window above is cool, there is a little problem (Immersed in joy, I must not find it, right?) For example, if you put the script above in a page that needs to pass frequently (such as the homepage), then every time you refresh this page, the window will pop up once. Isn’t it very annoying? :-(
Is there a solution? Yes! ;-) Follow me. We just need to use cookies to control it.
First, add the following code to the <HEAD> area of the main page HTML:
Copy the codeThe code is as follows:
<script>
function openwin(){
("","","width=200,height=200")
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if ( > 0) {
offset = (search)
if (offset != -1) {
offset +=
end = (";", offset);
if (end == -1)
end = ;
returnvalue=unescape((offset, end))
}
}
return returnvalue;
}
function loadpopup(){
if (get_cookie('popped')==''){
openwin()
="popped=yes"
}
}
</script>
Then, replace the original <BODY> sentence in the main page with <body onload="loadpopup()"> (note that it is not openwin but loadpop!). You can try refreshing this page or re-entering it, and the window will never pop up again. The real Pop-Only-Once!