I have an exam today, so no blog post from me — reposting a post by editor-in-chief Yin Likun. Original address: http://www.jackspace.cn/html/68309192.html
1. The most basic JS popup dialog window code
This is the most basic JS popup dialog; the code is just a few very simple lines:
Copy the code. Code as follows:
<script LANGUAGE="javascript">
<!--
window.open ("page.html")
\-->
</script>Because this is a piece of JavaScript code, it should be placed between the <script LANGUAGE="javascript"> tag and </script>. <!-- and --> work for some lower-version browsers, so those old browsers won’t display the code inside the tag as text. Get into this good habit.
window.open ("page.html") is used to control the popup of the new window page.html. If page.html is not in the same path as the main window, the path should be written out before it — both absolute paths (http://) and relative paths (../) work. Single or double quotes are both fine, just don’t mix them.
This piece of code can be added anywhere in the HTML — between <head> and </head>, or between <body> and </body>. The earlier it is, the earlier it executes, especially for pages with long code; if you want this JS popup dialog to appear early, put it as far forward as possible.
2. JS popup dialog code with added attribute settings
Next, let’s talk about setting the attributes of the JS popup dialog window. You just need to add a little something to the code above.
Let’s customize the appearance, size, and position of the popup window to fit the specific page.
Copy the 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,location=no,status=no")
// written as one line
\-->
</script>Parameter explanation:
<script LANGUAGE="javascript"> — JS script starts;
window.open — command to open a new window;
"page.html" — the filename of the popup window;
"newwindow" — the name of the popup window (not the filename), optional, can be replaced with empty "";
height=100 — window height;
width=400 — window width;
top=0 — window’s pixel distance from the top of the screen;
left=0 — window’s pixel distance from the left of the screen;
toolbar=no — whether to show the toolbar, yes to show;
menubar, scrollbars — the menu bar and scroll bar.
resizable=no — whether to allow resizing the window, yes to allow;
location=no — whether to show the address bar, yes to allow;
status=no — whether to show information in the status bar (usually that the file is already open), yes to allow;
</script> — JS script ends.
3. Control the JS popup dialog window with a function
Below is the code for a complete JS popup dialog.
Copy the 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, status=no")
// written as one line
}
//-->
</script>
</head>
<body onload="openwin()">
...any page content...
</body>
</html>Here a function openwin() is defined; its content is to open a window. It’s useless before being called.
How to call it?
Method 1: Pop up the window when the browser reads the page:
Copy the code. Code as follows:
<body onload="openwin()">Method 2: Pop up the window when the browser leaves the page:
Copy the code. Code as follows:
<body onunload="openwin()">Method 3: Call it with a link:
Copy the code. Code as follows:
<a href="#" onclick="openwin()">Open a window</a>Note: the # used is a dummy link.
Method 4: Call it with a button:
Copy the code. Code as follows:
<input type="button" onclick="openwin()" value="Open window">4. Pop up two windows at the same time
Slightly modify the source code:
Copy the 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,location=no, status=no")
// written as one line
window.open ("page2.html","newwindow2", "height=100, width=100, top=100, left=100,toolbar=no,menubar=no, scrollbars=no, resizable=no, location=no, status=no")
// written as one line
}
//-->
</script>To avoid the two popup windows covering each other, just use top and left to control their positions so they don’t overlap. Finally, call it using the four methods described above.
Note: the names of the two JS popup dialog windows (newwindow and newwindow2) must not be the same, or just leave both empty.
5. Main window opens 1.htm, while popping up a small window page.html
Add the following code to the main window’s <head> area:
Copy the code. Code as follows:
<script language="javascript">
<!--
function openwin() {
window.open("page.html","","width=200,height=200")
}
//-->
</script>Add to the <body> area:
Copy the code. Code as follows:
<a href="1.htm" onclick="openwin()">open</a>That’s it.
6. Timed close control for the JS popup dialog window
Next we add some control to the JS popup dialog window for a better effect. If we add a small piece of code to the popup page (note: add it to page.html’s HTML, not the main page, otherwise…), making it auto-close after 10 seconds, isn’t that cooler?
First, add the following code to page.html’s <head> area:
Copy the code. Code as follows:
<script language="javascript">
function closeit() {
setTimeout("self.close()",10000) // milliseconds
}
</script>Then, replace the original <BODY> line in page.html with this line: <body onload="closeit()">. (Don’t forget to write this line! Its job is to call the code that closes the window, so the window closes by itself after 10 seconds.)
7. Add a close button to the JS popup dialog window
Copy the code. Code as follows:
<FORM>
<INPUT TYPE="BUTTON" value="Close" onClick="window.close()">
</FORM>Heh, now it’s even more perfect!
8. The self-contained JS popup dialog window — two windows in one page
All the examples above contain two windows: one main window and one popup small window. With the example below, you can achieve the effect above within a single page.
Copy the 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");
// written as one 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 window">
</body>
</html>Look, the code inside OpenWindow.document.write() is just standard HTML, right? Just write more lines following the format. Be careful: one extra tag or one missing tag will cause an error. Remember to end with OpenWindow.document.close().
9. The ultimate application — Cookie control for the JS popup dialog window
Thinking back, the popup windows above are cool, but they have a small flaw (you must have been too immersed in joy to notice it?): for example, if you put the script above on a page you pass through frequently (like the homepage), then every time you refresh that page, the window will automatically execute the JS popup dialog code once — isn’t that annoying? :-( Is there a solution? Yes! ;-) Follow me. We use a cookie to control it.
First, add the following code to the main page’s HTML <HEAD> area:
Copy the 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 (documents.cookie.length > 0) {
offset = documents.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = documents.cookie.indexOf(";", offset);
if (end == -1) end = documents.cookie.length;
returnvalue=(documents.cookie.substring(offset,end))
}
}
return returnvalue;
}
function loadpopup(){
if (get_cookie("popped")==""){
openwin()
documents.cookie="popped=yes"
}
}
</script>Then, replace the original <BODY> line in the main page with <body onload="loadpopup()"> (note: it’s loadpopup, not openwin!). You can try refreshing this page or re-entering it — the window will never pop up the JS dialog again. It truly pops only once.
One thing to note: the case of the JS script should be kept consistent before and after.