Home >Web Front-end >JS Tutorial >Summary of nine js methods to pop up dialog boxes_javascript skills

Summary of nine js methods to pop up dialog boxes_javascript skills

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal: 2016-05-16 17:40:461183browse

[1. The most basic js pop-up dialog window code]

This is the most basic js pop-up dialog box. In fact, the code is very simple:

Copy code The code is as follows:

Because this is a piece of javascripts code, they should be placed between the . are effective for some older browsers. In these old browsers, the code in the tag will not be displayed as text. Develop this good habit.

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 written 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, between and , and between . The earlier it is, the earlier it will be executed, especially if the page code is long. On the page, this kind of js pop-up dialog box should be placed as far forward as possible if you want it to pop up as early as possible.

[2. Add js pop-up dialog code for attribute settings]

Let’s talk about the settings of js pop-up dialog window properties. Just add a little more to the code above.
Let’s customize the appearance, size, and pop-up position of the window that pops up in this js pop-up dialog box to suit the specific conditions of the page.

Copy code The code is as follows:

View Code

end of js script

[3. Use functions to control js pop-up dialog windows]

The following is the code for a complete js pop-up dialog box.

Copy code The code is as follows:

View Code

.. .Any page content...

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;

Copy code The code is as follows:

Method 2: Pop-up window when the browser leaves the page;

Copy code The code is as follows:

Method 3: Call with a connection:

Copy code The code is as follows:

Open a window

Note: The "#" used is a virtual connection.

Method 4: Call with a button:

Copy code The code is as follows:

【4. js pop-up dialog box that pops up 2 windows at the same time】

Slightly change the source code:

Copy code The code is as follows:

View Code

To avoid being covered by the two pop-up windows, Use top and left to control the pop-up position so that it does not cover each other. Finally, you can call it using the four methods mentioned above.

Note: The names of the two js pop-up dialog windows (newwindows and newwindow2) should not be the same, or they should all be empty.

[5. Open the file 1.htm in the main window, and the small window page.html will pop up at the same time]

The following code is added to the main window area:

Copy code The code is as follows:

View Code

Join the area:

Copy code The code is as follows:

open

That’s it.

[6. Timing closing control of js pop-up dialog box window]

Next, let’s control the window of the js pop-up dialog box, 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 if it automatically closes after 10 seconds?

First, add the following code to the area of the page.html file:

Copy code The code is as follows:

Then, use This sentence can 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.)

【7. Add a close button in the js pop-up dialog window】

Copy code The code is as follows:

Haha, it's even more perfect now!

[8. The included js pop-up dialog window - two windows on one page]

The above examples all contain two windows, one is the main window and the other is a pop-up small window.

With the following example, you can complete the above effect in one page.

Copy code The code is as follows:

View Code

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 it with OpenWindow.document.close().

[9. Ultimate application--JS pop-up dialog window cookie control]

Recall that although the above pop-up window is cool, there is a little problem (you must not have noticed it if you are immersed in joy, right?) For example, if you put the above script in a page that needs to be passed frequently (such as the homepage) , then every time the page is refreshed, the window will automatically execute the js pop-up dialog code once. Isn't it very annoying? :-(Is there a solution? Yes! ;-) Follow me.

We use cookies to control it.

First, add the following code to the area of the main page HTML:

Copy code The code is as follows:

View Code