Joke Collection Website - Bulletin headlines - How to realize pop-up window and get high score in web page making!

How to realize pop-up window and get high score in web page making!

There are many/article/78/articlelist 78 _14.htm on this website.

Take your time.

When designing a website, we will use pop-up windows when the website has undergone major changes, or when we need to make any announcements. At this time, a window will pop up as soon as we enter this page. In fact, it is really easy to make such a pop-up window, as long as a javascript code is added to the HTML code of the page. Let's take a look at this simplest pop-up window:

Add the following code to the

& lt scripting language = "JavaScript" > //* The opening tag of the JavaScript script, please remember.

& lt! -//* enables browsers that do not support javascript to browse without errors.

Window.open ('pop 1. html')/* This is the key, and pop1.html is the content of your pop-up window.

-& gt;

& lt/SCRIPT & gt;

Just pay attention to the following points: window.open ('pop 1.html') is used to control the pop-up window pop 1. html. If the pop1.html is not in the same path as the main window file, the path, absolute path (http://) and relative path (../) should be specified. You can use single quotation marks and double quotation marks, but you must never mix them. Use single quotation marks for a while and double quotation marks for a while.

What we have realized above is the most basic pop-up window. Here we go. Now let's look at a slightly more complicated pop-up window. You just need to make a little change to the code above! In this way, we can customize the appearance, size and pop-up position of the pop-up window to adapt to the specific situation of the page and the amount of text.

& lt scripting language = "JavaScript" >

& lt! -

window . open(‘pop 2 . html‘,popwindow,height = 200,width=320,top=0,left=24,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status = no)

//* The above code should be written in a line in the title name of the "popwindow" pop-up window; Height=200 pop-up window height; Width=320 pop-up window width; Top= 0 pixel value of the pop-up window from the top of the screen; Left= the window is 24 pixels away from the left side of the screen; Toolbar=no Whether the pop-up window displays the toolbar, and yes means display; Menu bar and scroll bar control the display of the menu bar and scroll bar of the pop-up window. Resizable=no Whether it is allowed to change the size of the pop-up window, yes is allowed; Location=no Whether the pop-up window displays the address bar, and yes indicates permission; Status=no Whether to display the information in the status bar (usually the file has been opened), and yes is allowed.

-& gt;

& lt/SCRIPT & gt;

But we see that this pop-up window is so simple that you can't control and set it basically. What we need is a pop-up window that can meet our needs (the requirements of modern people are getting higher and higher), so we can use the following script to achieve it. You can not only customize the window size, but also change it to your own description according to your own needs. Such a welcome window will definitely make your home page cooler.

Add the following code to the

& lt scripting language = "JavaScript" >

& lt! -

var gt = unescape(% 3e);

var popup = null

Var over = "Start popup navigator";

popup = window . open(‘,popupnav,width = 200,height= 170,resizable= 1,scroll bars = auto‘); /*width and height are the size of the window, which can be adjusted according to your own needs, while resizable is to control whether the window size changes according to the number of words, which is fixed when the value is 0, and can be changed when it is 1, and scrollbars control the scroll bar).

If (pop up! = null) {

if(popup . opener = = null ){

popup.opener = self

}

Popup. location.href =' File describing the contents of the window. html‘; /* popup.location.href =' used to explain the contents of the window. Htm, which is used to set the file name of the content appearing in the window.

}

//--& gt;

& lt/script & gt;

Sometimes we can pop up two windows at the same time as needed. Is it difficult to achieve this? In fact, it's not difficult. If you understand the above, it will be a piece of cake. Let's have a look. You just need to modify the code slightly:

& lt scripting language = "JavaScript" >

& lt! -

window . open(“pop 1 . html“、“popwindow 1“、“height= 100、width= 120、top=0、left=24、toolbar=no、menubar=no、scrollbars=no、resizable=no、location=no、status=no“)

window . open(“pop 2 . html“、“popwindow2“、“height= 100、width=200、top= 100、left= 144、toolbar=no、menubar=no、scrollbars=no、resizable=no、location=no、status=no)

//--& gt;

& lt/script & gt;

Here, in order to avoid the overlap of two pop-up windows, we just use top and left to control the pop-up position to avoid overlapping each other.

With the above contents, I think it is easy for you to make a cool and good pop-up window, but we find that when you visit a website, if pop-up windows appear frequently (refresh them every time), we will feel very annoyed. Here, let's take a look at some optimization processing of pop-up windows:

First, we add a "close window" button to the pop-up window.

Just add the following code:

& lt form & gt

& lt enter type =' button' value =' close' onclick =' window.close ()' >

& lt/FORM & gt;

The second measure: let the pop-up window close automatically at regular intervals.

First, add the following code to the.

& lt scripting language = "JavaScript" >

& lt! -

Function close it(){

settimeout(“self。 Close () ",100000)// The unit is milliseconds, and here is 100 second.

& lt/script & gt;

Then, use the

The third measure: control your pop-up window to pop up only once (don't you feel bored if it pops up every time you enter the refresh? ) Is there any good way?

Of course, we can now achieve this requirement by using cookie to control it.

First, you need to add the following code to the.

& lt script & gt

Function open win(){

window . open(“pop 1 . html“、“、“width= 120、height=240“)

}

Function get _ cookie(Name ){

var search = Name+“=“

var return value =““;

if(documents . cookie . length & gt; 0) {

offset = documents . cookie . index of(search)

if(offset! = - 1) {

Offset+= search.length.

end = documents . cookie . index of(“; "offset);

if(end = =- 1)

end = documents . cookie . length;

return value = unescape(documents . cookie . substring(offset,end))

}

}

Return returns the value;

}

The function load popup(){//* controls the function of the pop-up window, and you should use his.

if(get _ cookie(‘popped‘‘= =‘){

openwin()

documents . cookie =“popped = yes“

}

}

//--& gt;

& lt/script & gt;

Then, use the