JS pop-up window code collection (detailed arrangement)_javascript skills

I think most of you know how to use web pages to pop up various forms of windows, but how to create various pop-up windows, let’s learn today:
1 .Pop up a full-screen window

2. Pop up an F11-enabled window

3. Pop up a window with a favorite link toolbar

4. Web page Dialog box

showModalDialog() or showModelessDialog() to call the web dialog box. As for the difference between showModalDialog() and showModelessDialog(), The window opened by showModalDialog() (modal window for short) is placed on the parent window and must be closed to access the parent window (it is recommended to use it as little as possible to avoid offending); showModelessDialog()
dialogHeight: iHeight sets the dialog window height.
dialogWidth: iWidth sets the width of the dialog window.
dialogLeft: iXPos sets the left position of the dialog window relative to the upper left corner of the desktop.
dialogTop: iYPos sets the top position of the dialog window relative to the upper left corner of the desktop.
center: {yes | no | 1 | 0} Specifies whether to center the dialog box on the desktop. The default value is "yes".
help: {yes | no | 1 | 0} Specifies whether to display context-sensitive help icons in the dialog window. The default value is "yes".
resizable: {yes | no | 1 | 0} Specifies whether the dialog window is resizable. The default value is "no".
status: {yes | no | 1 | 0 } Specifies whether the dialog window displays the status bar. The default value is "yes" for modeless dialog windows and "no" for modal dialog windows.

5. Other pop-up window codes
Friends who often surf the Internet may have been to some websites. As soon as you enter the homepage, a window will pop up, or a link or button will pop up. Usually In this window, some notes, copyright information, warnings, welcome, or other information that the author wants to give special reminders will be displayed. In fact, it is very easy to create such a page. You only need to add a few pieces of javascript code to the HTML of the page. Below I will take you to analyze its mystery.

[The most basic pop-up window code]
In fact, the code is very simple:

Because this is a piece of java script code, they should be placed between the . are effective for some older browsers. If javascript is not supported in these old browsers, the code in the tag will not be displayed as text.
Window.open ('page.html') is used to control the pop-up of a new window page.html. If page.html is not in the same path as the main window, the path should be stated in front, the absolute path (http:// ) and relative paths (../) are available.
You can use either single quotes or double quotes, just don’t mix them.
This piece of code can be added anywhere in the HTML, or between and . The earlier the position, the earlier it will be executed, especially when the page code is long and you want to make the page If it pops up early, put it as far forward as possible.

[Pop-up window after settings]
Let’s talk about setting the appearance of the pop-up window. Just add a little more to the code above.
Let’s customize the appearance, size, and pop-up position of this pop-up window to suit the specific conditions of the page.

A function openwin() is defined here, and the function content is to open a window. It serves no purpose until it is called. How to call it?
Method 1: A window pops up when the browser reads the page;
Method 2: A window pops up when the browser leaves the page;
Method 3: Call with a connection: < ;a href="#" >Open a window
Note: The "#" used is a virtual connection.
Method 4: Use a button to call:

[The main window opens the file 1.htm, and the small window page pops up at the same time .html】
Add the following code to the area of ​​the main window:

Add the area: open.

[Control of timed closing of pop-up windows]
Now we can control the pop-up windows, and the effect will be better. If we add a small piece of code to the pop-up page (note that it is added to the HTML of page.html, not the main page, otherwise...), wouldn't it be cooler to have it automatically close after 10 seconds?
First, add the following code to the area of ​​the page.html file:

Then, use the sentence to replace the original sentence in page.html. (Don’t forget to write this sentence! The function of this sentence is to call the code to close the window, and then close the window automatically after 10 seconds.)

[Add a in the pop-up window Close button】

Haha, it’s even more perfect now!
[Pop-up window included - two windows on one page]
The above examples all contain two windows, one is the main window and the other is a small pop-up window.
With the following example, you can complete the above effect in one page.

Look at OpenWindow Isn’t the code in .document.write() just standard HTML? Just write more lines according to the format. Be sure to note that an error will occur if there is one more label or one less label. Remember to end with OpenWindow.document.close().

[Ultimate application - Cookie control for pop-up windows]
Recall that although the above pop-up window is cool, it has a little problem (you are immersed in joy, you must Didn’t you find it?) For example, if you put the above script in a page that needs to be passed frequently (such as the homepage), then every time you refresh the page, the window will pop up. Isn’t it very annoying? Is there any solution? Yes! Follow me. We can use cookies to control it.
First, add the following code to the area of ​​the main page HTML:

Type the following code into the BODY area:
//pop when leave page
Or:
//pop when enter page
You can try Refresh this page or re-enter the page, and the window will never pop up again. Real Pop-Only-Once!
Writing this, I have basically finished talking about the production and application techniques of pop-up windows. I hope it will be helpful to friends who are making web pages, and I am very happy.
It should be noted that it is best to keep the capitalization in JS scripts consistent.
Pop-up window without menu, toolbar or address bar:

Method 2: Cookies application: Control pop-up windows when we are in a After setting a POP pop-up window on the page, the POP window will automatically pop up every time you browse the page again, causing unnecessary trouble. So how to solve this problem? Here I will use a simple example to explain how to use cookies to make the pop-up window pop up only when you browse the page for the first time, so that it will no longer be annoying in the future!
<script> function openpopwindow() { window.open("hello.htm","","width=200,height=200" //Modify the pop-up window yourself} function get_cookie(Name) { var search = Name "="; var returnvalue = ""; if (documents.cookie.length > 0) { offset = documents.cookie.indexOf(search); if (offset != -1) { // If there are previous cookie records offset = search.length; // Set the starting position of the cookie end = documents.cookie.indexOf(";", offset); // Set the ending position of the cookie if (end == -1) end = documents.cookie. length; returnvalue=unescape(documents.cookie.substring(offset, end)) } } return returnvalue; } function loadpopup() { if (get_cookie('popped')=='') { openpopwindow(); documents.cookie= "popped=yes"; } } </script>
Type the above code into the BODY area: //When leaving the page,
will pop up or: //Open the page

[The copyright of this article is jointly owned by the author and Oso.com. If you need to reprint, please indicate the author and source]
The pop-up window effect when leaving the page:
Effect: When someone closes this page, a window will pop up and you can write some blessing words
Core code:

I think most of you know how to use web pages to pop up various forms of windows, but how do you create those various pop-up windows? , let’s learn it today:
1. Pop up a full-screen window

2. Pop up a window that has been F11ized

3. Pop up a window with a favorite link toolbar

4. Web page dialog box

showModalDialog() or showModelessDialog() to call the web dialog box, as for showModalDialog() and showModelessDialog() The difference is that the window opened by showModalDialog() (modal window for short) is placed on the parent window and must be closed to access the parent window (it is recommended to use it as little as possible to avoid offending); showModelessDialog()
dialogHeight: iHeight setting The height of the dialog window.
dialogWidth: iWidth sets the width of the dialog window.
dialogLeft: iXPos sets the left position of the dialog window relative to the upper left corner of the desktop.
dialogTop: iYPos sets the top position of the dialog window relative to the upper left corner of the desktop.
center: {yes | no | 1 | 0} Specifies whether to center the dialog box on the desktop. The default value is "yes".
help: {yes | no | 1 | 0} Specifies whether to display context-sensitive help icons in the dialog window. The default value is "yes".
resizable: {yes | no | 1 | 0} Specifies whether the dialog window is resizable. The default value is "no".
status: {yes | no | 1 | 0 } Specifies whether the dialog window displays the status bar. The default value is "yes" for modeless dialog windows and "no" for modal dialog windows.
5. Other pop-up window codes
Friends who often surf the Internet may have been to some websites. As soon as you enter the homepage, a window will pop up, or a link or button will pop up. Usually, some precautions will be displayed in this window. , copyright information, warnings, welcome, or other information that the author wants to give special reminders. In fact, it is very easy to create such a page. You only need to add a few pieces of javascript code to the HTML of the page. Below I will take you to analyze its mystery.

[The most basic pop-up window code]
In fact, the code is very simple:

Copy code The code is as follows:

Because this is a piece of java script code, they should be placed in the

. The earlier the position, the earlier it will be executed, especially when the page code is long and you want to make the page If it pops up early, put it as far forward as possible.

[Pop-up window after settings]
Let’s talk about setting the appearance of the pop-up window. Just add a little more to the code above.
Let’s customize the appearance, size, and pop-up position of this pop-up window to suit the specific conditions of the page.

Copy code The code is as follows:

js script End.

[Control pop-up windows with functions]
The following is a complete code

Copy the code The code is as follows:

...Any page content...

A function is defined here openwin(), the function content is to open a window. It has no purpose before calling it. How to call it?
Method one: The window pops up when the browser reads the page;
Method two: < body > A window pops up when the browser leaves the page;
Method 3: Call with a connection: Open a window
Note: Use "#" It is a virtual connection.
Method 4: Use a button to call:


[The main window opens the file 1.htm, and the small window page pops up at the same time .html】 Add the following code to the area of ​​the main window:

Copy the code The code is as follows:

Join the area: openThat’s it.


[Control of timed closing of pop-up windows] Now we can control the pop-up windows, and the effect will be better. If we add a small piece of code to the pop-up page (note that it is added to the HTML of page.html, not the main page, otherwise...), wouldn't it be cooler to have it automatically close after 10 seconds?
First, add the following code to the area of ​​the page.html file:

Copy the code The code is as follows:

Then, use the sentence to replace the original sentence in page.html. (Don’t forget to write this sentence! The function of this sentence is to call the code to close the window, and then close the window automatically after 10 seconds.)


[Add a in the pop-up window Close button】

Copy code The code is as follows:

Haha, it’s even more perfect now!


[Pop-up window included - two windows on one page] The above examples all contain two windows, one is the main window and the other is a small pop-up window .
With the following example, you can complete the above effect in one page.

Copy code The code is as follows:

Open a window

Look at the code in OpenWindow.document.write(). Isn’t it standard HTML? Just write more lines according to the format. Be sure to note that an error will occur if there is one more label or one less label. Remember to end with OpenWindow.document.close().