Home > Developer > JavaScript
| Tips for making a javascript pop-up window | |
|---|---|
| Http://www.sina.com.cn 2002/04/04 SCID | |
Text/funny
Friends who frequently access the Internet may have visited such websites. when they enter the home page, a window will pop up immediately, or a connection or button will pop up, this window usually displays some precautions, copyright information, warnings, visits, and other information that the author wants to remind him. In fact, it is very easy to make such a page. You only need to add several JavaScript segments to the HTML of the page.Code. Next, I will take you through the analysis of its mysteries.
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 used for some earlier browsers, and the code in the labels is not displayed as text in these old browsers. This is a good habit.
Window. Open ("page.html") is used to control the pop-up window page.html. If page.html is not in the same path as the main window, the path, absolute path (http: //), and relative path (../) should be specified before.
You can use single quotes and double quotes, but do not mix them. This piece of code can be added to any location of HTML, either between
2. After setting, the pop-up window is displayed.
Let's talk about the settings in the pop-up window. You just need to add something to the code above. We will customize the appearance, size, and position of the pop-up window to adapt to the specific situation of the page.
<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 row
-->
</SCRIPT>
Parameter description:
<Script language = "JavaScript"> the JS script starts;
Window. Open command to pop up a new window;
The file name in the "page.html" pop-up window;
"Newwindow" Name of the pop-up window (not a file name), not required, can be blank;
Height = 100 window height; Width = 400 window width;
Top = the pixel value between the 0 window and the top of the screen;
Left = 0 the pixel value between the window and the left of the screen;
Toolbar = No indicates whether to display the toolbar. Yes indicates display;
Menubar and scrollbars indicate the menu bar and scroll bar.
Resizable = No: whether to change the window size. Yes: Yes;
Location = No indicates whether the address bar is displayed. Yes indicates yes;
Status = No whether to display the information in the status bar (usually the file has been opened), yes is allowed;
</SCRIPT> end of JS script
3. Function Control pop-up window
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 row
}
// --> </SCRIPT>
</Head>
<Body onload = "openwin ()">
... Any page content...
</Body>
</Html>
A function openwin () is defined here, and the function content is to open a window. There is no purpose before calling it.
How to call it?
Method 1: <body onload = "openwin ()"> A window pops up when the browser reads the page;
Method 2: <body onUnload = "openwin ()"> A window pops up when the browser leaves the page;
Method 3: call with a connection: <a href = "#" onclick = "openwin ()"> open a window </a>
Note: "#" is a virtual connection.
Method 4: call with a button: <input type = "button" onclick = "openwin ()" value = "open window">
4. Two windows are displayed at the same time.
PairSource codeSlightly changed:
<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 row
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 row
}
// -->
</SCRIPT>
To avoid overwriting the two pop-up windows, use top and left to control the position of the pop-up window. Finally, use the four methods mentioned above to call.
Note: The names of the two windows (newwindows and newwindow2) must not be the same, or they are all empty. OK?
5. open the file 1.htmin the main window, and pop up the window page.html at the same time.
Add the following code to the
<Script language = "JavaScript">
<! --
Function openwin (){ Window. Open ("page.html", "", "width = 200, Height = 200 ")
}
// -->
</SCRIPT>
Add to the <body> area:
<A href = "1.htm" onclick =" openwin () "> open </a>
6. timed close control for the pop-up window
Next we will make some control over the pop-up window, and the effect will be better. If we add the field code to the page that pops up (the page is added to the HTML of page.html, not the page, otherwise...), will it be cool to enable it to be automatically disabled in 10 seconds?
First, add the following code to the
<Script language = "JavaScript">
Function closeit (){
SetTimeout ("self. Close ()", 10000) // millisecond
}
</SCRIPT>
Then, use <body onload = "closeit ()"> to replace the original <body> sentence in page.html. (Do not forget to write this sentence! The function of this statement is to call the code for closing the window. The window will be closed in 10 seconds .)
7. Add a close button in the pop-up window. <Form>
<Input type = "button" value = "close" onclick = "window. Close ()">
</Form>
Now it's more perfect!
8. included pop-up window-one page and two windows
The preceding example contains two windows: one is the main window and the other is the small window that appears. Through the example below, you can complete the above effect on a page.
<HTML>
<Head>
<Script language = "JavaScript">
Function openwin ()
{
OpenWindow = Window. Open ("", "newwin", "Height = 250, width = 250, toolbar = No, scrollbars =" + scroll + ", menubar = No ");
// Write a row
Opendeskdoc ument. Write ("<title> example </title> ")
Openmediaworkflow Doc ument. Write ("<body bgcolor = # ffffff> ")
Openmediaworkflow Doc ument. Write (" Openmediaworkflow Doc ument. Write ("new window opened! ")
Openmediaworkflow Doc ument. Write ("</body> ")
Openmediaworkflow Doc ument. Write ("
Openmediaworkflow Doc ument. Close ()
}
</SCRIPT>
</Head>
<Body>
<A href = "#" onclick = "openwin ()"> open a window. </a>
<Input type = "button" onclick = "openwin ()" value = "open window">
</Body>
</Html>
Do you think the code in openmediaworkflow Doc ument. Write () is not standard HTML? You only need to write more rows according to the format. An error occurs when you add one or more labels. Remember to end with opentracing upload Doc ument. Close.
9. Ultimate application-Cookie control in the pop-up window
In retrospect, although the pop-up window above is cool, there is a little bit of a problem (immersed in joy, do not find it ?) For example, if you place the above script in a page that requires frequent access (such as the homepage), the window will pop up every time you refresh the page, isn't it very annoying? :-( Is there a solution? Of course! We can use cookies to control it. First, add the following code to the
<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, use <body onload = "loadpopup ()"> (not openwin, but loadpop !) Replace the original <body> sentence on the home page. You can refresh the page or enter the page again, and the window will no longer pop up. Real pop-only-once!
The creation and application skills of the pop-up window are basically completed, and I am exhausted. I have said so much in one breath, I hope that my friends who are making web pages will be very pleased.
It should be noted that the case sensitivity of JavaScript scripts should be consistent.
(Responsible editor ardeler) |
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
