Making JavaScript pop-up tips nine

Javascript| pop-up Window | tips

Friends who often surf the internet may visit such websites, a window will pop up immediately, or press a connection or button to pop up, usually in this window will show some attention, copyright information, warning, welcome to patronize such words or the author wants special information. In fact, making such a page effect is very easy, as long as the HTML page to add a few paragraphs of JavaScript code can be achieved. Below I will take you to dissect its mystery.

1, the most basic pop-up window code

In fact, the code is very simple:

< SCRIPT language= "JavaScript" >

<!--

window.open ("page.html")

-->

</script>

Because this is a piece of JavaScript code, they should be placed between < SCRIPT language= "JavaScript" >. <!--and--> are useful for some versions of browsers that do not display the code in the label as text in these old browsers. To develop this good habit ah.

window.open ("page.html") is used to control the pop-up of new Windows page.html, if page.html is not in the same path as the main window, the previous path, absolute path (http://) and relative path (... /) are available.

Both single and double quotes are OK, just don't mix.

This piece of code can be added anywhere in HTML,< head> and

2, after setting up the pop-up window

Let's say a pop-up window setting. Just add something to the code above. Let's customize the appearance of this pop-up window, size, and popup position to fit the page's specifics.

< 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 ")

Write a line

-->

</script>

Parameter explanation:

< script language= "javascript" > JS script started;

window.open the command to eject a new window;

The filename of the "page.html" pop-up window;

"NewWindow" pop-up window name (not file name), not required, available null "instead;"

height=100 window height;

width=400 window width;

The pixel value of the Top=0 window from the top of the screen;

The pixel value of the left=0 window from the left side of the screen;

Toolbar=no whether the toolbar is displayed, yes for display;

Menubar,scrollbars represents the menu bar and scroll bar.

Resizable=no whether to allow changes to the window size, yes to allow;

Location=no whether the address bar is displayed, yes is allowed;

Status=no whether the information in the status bar is displayed (usually the file is open), yes to allow;

</script> JS Script end

3. Control pop-up window with function

The following is a complete code:

< 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 ")

Write a line

}

-->

</script>

< BODY >

... Any page content ...

</body>

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 it?

Method a:< body > browser to read the page pop-up window;

Method two:< body onunload= "Openwin ()" > Browser when leaving the page pop-up window;

Method Three: Call:< a href= "#" with a connection > open a Window </a>

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

Method Four: Use a button to invoke:< input type= "button" value= "open Window" >

4, at the same time pop-up 2 windows

Change the source code a little bit:

< 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 ")

Write a 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 ")

Write a line

}

-->

</script>

To avoid the 2 windows that pop up, use top and left to control the pop-up positions without overwriting each other. The last four methods mentioned above can be invoked.

Note: The name of the 2 windows (NewWindows and NewWindow2) is not the same, or simply all empty. Ok?

5, the main window opens the file 1.htm, simultaneously ejects the small window page.html

The following code is added to the main window < head> area:

< script language= "JavaScript" >

<!--

function Openwin () {

window.open ("page.html", "" "," width=200,height=200 ")

}

-->

</script>

Join < body> area:

< a href= "1.htm" >open</a>

6, pop-up window of the timing of the shutdown control

Below we have some control of the pop-up window, the effect is better. If we add a small piece of code to the pop-up page (note is added to the page.html HTML, not the main page, otherwise ...), let it automatically shut down in 10 seconds is it cooler?

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

< script language= "JavaScript" >

function Closeit () {

SetTimeout ("Self.close ()", 10000)//MS

}

</script>

Then, use < body > This sentence to replace page.html Zhongyuan Some < body> this sentence on it. (Don't forget to write this sentence!) The function of this sentence is to call the code that closes the window, and then close the window itself after 10 seconds. )

7. Add a Close button in the pop-up window

< form>

< INPUT type= "button" value= "Off" >

</form>

Oh, now more perfect!

8, Inside the pop-up window---a page two windows

The example above contains two windows, one is the main window and the other is a pop-up window. With the example below, you can do the above in one page.

< html>

< head>

< SCRIPT language= "JavaScript" >

function Openwin ()

{

Openwindow=window.open ("", "Newwin", "height=250, width=250,toolbar=no,scrollbars=" +scroll+ ", Menubar=no");

Write a line

OpenWindow.document.write ("< title> example </title>")

OpenWindow.document.write ("< body bgcolor= #ffffff >")

OpenWindow.document.write ("< h1>hello!

OpenWindow.document.write ("New window opened!")

OpenWindow.document.write ("</body>")

OpenWindow.document.write ("

OpenWindow.document.close ()

}

</script>

< body>

< a href= "#" > Open a Window </a>

< input type= "button" value= "open Window" >

</body>

Look at the code inside OpenWindow.document.write () is not standard HTML? Just write more lines in the format. Be sure to pay attention to one more label or one less label will cause errors. Remember to end with OpenWindow.document.close ().

9, the Ultimate application-pop-up window of the cookie control

Recall that the above pop-up window, although cool, but there is a little trouble (immersed in joy, must not find it?) For example, you put the above script in a page that needs to go through frequently (for example, the first page), then each refresh this page, the window will pop up once, is not very annoying? :-(

Is there any way to solve it? Of course! We can use cookies to control it. First, add the following code to the < head> area of the homepage HTML:

< 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 (offset, end))

}

}

Return returnvalue;

}

function Loadpopup () {

if (Get_cookie ("popped") = ") {

Openwin ()

Document.cookie= "Popped=yes"

}

}

</script>

Then, with < BODY > (note not openwin but Loadpop Ah!) Replace the main page of the original < body> this sentence can be. You can try to refresh the page or re-enter the page, and the window will never pop again. The real pop-only-once!.

Written here pop-up window of the production and application skills are basically completed, I am also tired, said so much, I hope to be making a friend of the Web site to help me very relieved.

Note that the capitalization in the JS script is best kept consistent.