I think most of you know how to use web pages to pop up windows in various forms, but let’s learn about how to create a variety of pop-up windows today:
1. Open a full screen window
The code is as follows:
<html> <body //www.VeVB.COM','Wulin.com','fullscreen');">; <b>www.VeVB.COM</b> </body> </html>
2. Open a window that has been transformed by F11
The code is as follows:
<html> <body '//www.VeVB.COM','Wulin.com','channelmode');">; <b>www.VeVB.COM</b> </body> </html>
3. Open a window with the favorite link toolbar
The code is as follows:
<html> <body www.wangye8.com','wulin.com','width=400,height=300,directories');"> <b>www.wangye8.com</b> </body> </html>
4. Web page dialog box
The code is as follows:
<html> <SCRIPT LANGUAGE="javascript"> <!-- showModalDialog('//www.VeVB.COM,'Wulin.com','dialogWidth:400px;dialogHeight:300px;dialogLeft:200px;dialogTop:150px;center:yes;help:yes;resizable:yes;status:yes') //--> </SCRIPT> <b>www.wangye8.com</b> </body> </html> <html> <SCRIPT LANGUAGE="javascript"> <!-- showModelessDialog('//www.VeVB.COM,'Wulin.com','dialogWidth:400px;dialogHeight:300px;dialogLeft:200px;dialogTop:150px;center:yes;help:yes;resizable:yes;status:yes') //--> </SCRIPT> <b>http://www.wangye8.com</b> </body> </html>showModalDialog() or showModelessDialog() to call the web dialog box. As for the difference between showModalDialog() and showModelessDialog(), it is that the window opened by showModalDialog() (referred to as a mode window) 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 disgusting); showModelessDialog()
dialogHeight: iHeight Sets 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 the context-sensitive help icon is displayed in the dialog window. The default value is "yes".
resizable: {yes | no | 1 | 0 } Specifies whether the dialog window size is variable. The default value is "no".
status: {yes | no | 1 | 0 } Specifies whether the status bar is displayed in the dialog window. For non-mode dialog windows, the default value is "yes"; for mode dialog windows, the default value is "no".
5. Other pop-up window codes
Friends who often surf the Internet may have visited such websites. Once they enter the homepage, a window will pop up immediately, or press a link or button to pop up. Usually, some precautions, copyright information, warnings, welcomes, etc., or information that the author wants to give special prompts. In fact, it is very easy to make such a page. Just add a few java script code to the HTML of the page. Next, I will take you to analyze its mystery.
【The most basic pop-up window code】
In fact, the code is very simple:
The code is as follows:
<SCRIPT LANGUAGE="java script"> <!-- window.open ('page.html') --> </SCRIPT>Because this is a piece of java script code, they should be placed between the <SCRIPT LANGUAGE ="java script"> tag and </script>. <!-- and --> are useful for some browsers with lower versions. If Java script 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 written in front, both the absolute path (http://) and the relative path (../) are OK.
It is OK to use single and double quotes, but don't mix them.
This piece of code can be added to any location of HTML, and it can be added between <head> and </head>. The higher the position, the earlier the execution, especially when the page code is longer, try to put it forward if you want the page to pop up early.
【Pop-up window after setting】
Let’s talk about the settings of the appearance of the pop-up window. Just add a little more to the above code.
Let's customize the appearance, size and pop-up position of this pop-up window to suit the specific situation of the page.
The code is as follows:
<SCRIPT LANGUAGE="java script:> <!-- 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 as one line--> </SCRIPT>Parameter explanation:
<SCRIPT LANGUAGE="java script"> The js script starts;
window.open command to pop up a new window;
page.html The file name of the new window pops up;
The name of the newwindow pop-up window (not the file name), which can be replaced by empty ";
height=100 window height;
top=0 The pixel value of the window from the top of the screen;
left=0 The pixel value of the window from the left side of the screen;
toolbar=no Whether to display the toolbar, yes is the display;
menubar,scrollbars means menu bar and scroll bar;
resizable=no Whether to allow changing the window size, yes is allowed;
location=no Whether to display the address bar, yes is allowed;
status=no Whether to display information in the status bar (usually the file is already open), yes is allowed;
</SCRIPT> The js script ends.
【Use functions to control pop-up windows】
Here is a complete code.
The code is as follows:
<html> <head> <script LANGUAGE="java script"> <!-- function openwin(){ window.open("page.html","newwindow","height=100,width=400,toolbar=no,menubar=no,scrollbars=no,resizable=no, location=no,status=no";) //Write as a line} --> </script> </head> <body > ...Arbitrary page content... </body> </html>Here is a function openwin() defined, and the function content is to open a window. There is no use until it is called. How to call it?
Method 1: <body> A pop-up window appears when the browser reads the page;
Method 2: <body> A pop-up window appears when the browser leaves the page;
Method 3: Call with a connection: <a href="#" >Open a window</a>
Note: The "#" used is a virtual connection.
Method 4: Call with a button: <input type="button" value="Open window">
[The file 1.htm is opened in the main window, and a small window page.html pops up at the same time]
Add the following code to the main window <head> area:
The code is as follows:
<script language="java script"> <!-- function openwin(){ window.open("page.html","","width=200,height=200" ;) } //--> </script>Just add the <body> area: <a href="1.htm" >open</a>.
【Control timed closing control for pop-up window】
Let’s take some control over the pop-up window, and the effect will be even 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 let it close automatically after 10 seconds?
First, add the following code to the <head> area of the page.html file:
The code is as follows:
<script language="java script"> function closeit() { setTimeout("self.close()",10000) //ms} </script>Then, use the sentence <body> instead of the original sentence <BODY> in page.html. (Don't forget to write this sentence! The purpose of this sentence is to call the code that closes the window, and close the window yourself after 10 seconds.)
【Add a close button in the pop-up window】
The code is as follows:
<form>
<INPUT TYPE='BUTTON' value='Close'
</form>
Haha, it’s more perfect now!
[Popt-up window included - two windows per page]
The above examples all contain two windows, one is the main window and the other is the pop-up window.
With the following example, you can complete the above effect in a page.
The code is as follows:
<html> <head> <SCRIPT LANGUAGE="java script"> function openwin() { OpenWindow=window.open("","newwin","height=250,width=250,toolbar=no,scrollbars="+scroll+",menubar=no";); //Write it as a line OpenWindow.document.write("<TITLE>Example</TITLE>" ;) OpenWindow.document.write("<BODY BGCOLOR=#FFFFF>" ;) OpenWindow.document.write("<H1>Hello!</h1>" ;) OpenWindow.document.write("New window opened!" ;) OpenWindow.document.write("</BODY >" ;) OpenWindow.document.write("</HTML>" ;) OpenWindow.document.close() } </script> </head> <body> <a href="#" >Open a window</a> <input type="button" value="Open window"> </body> </html>Let's see if the code in OpenWindow.document.write() is not the standard HTML? Just write more lines in the format. Be careful that if one more label or one less label will cause errors. Remember to end with OpenWindow.document.close().
【Ultimate Application – Cookie Control in Popup Window】
Recall that although the pop-up window above is cool, there is a little problem (you are immersed in joy, you must not find it, right?) For example, if you put the script above in a page that needs to pass frequently (such as the homepage), then every time you refresh this page, the window will pop up once. Isn’t it very annoying? Is there a solution? Yes! Follow me. We just need to use cookies to control it.
First, add the following code to the <HEAD> area of the main page HTML:
The code is as follows:
<script> function openpopup(){ window.open("hello.htm","","width=300,height=300") //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 cookie exists offset += search.length // set index of beginning of value end = documents.cookie.indexOf(";", offset); // set index of end of cookie value if (end == -1) end = documents.cookie.length; returnvalue=unescape(documents.cookie.substring(offset, end)) } } return returnvalue; } function loadpopup(){ if (get_cookie('popped')==''){ openpopup() documents.cookie="popped=yes" } } </script>Type the following code into the BODY area:
<body > //pop when leave page
or:
<body > //pop when enter page
You can try refreshing this page or re-entering it, and the window will never pop up again. The real Pop-Only-Once!
Having written this, the production and application techniques of pop-up windows have basically been finished. I hope I will be very pleased to help my friends who are making web pages.
It should be noted that the case in JS scripts is best kept consistent before and after.
Popup windows without menus, toolbars, and address bars:
The code is as follows:
<script language="java script"> <!-- var gt = unescape('%3e'); var popup = null; var over = "Launch Pop-up Navigator"; popup = window.open('', 'popupnav', 'width=500,height=500,resizable=0,scrollbars=auto'); // width=500,height=500 are the window length and width if (popup != null) { if (popup.opener == null) { popup.opener = self; } popup.location.href = 'The file name to be opened'; } // --> </script>Method 2: Cookies application: Control popup window When we set a POP popup window in a page, every time we rebrowse the page, the POP window will automatically pop up, causing unnecessary trouble. So how to solve this problem? Here I will use a simple example to explain how to make the pop-up pop-up only pop up when browsing the page for the first time by operating cookies, and it will no longer cause annoying in the future!
Copy the code as follows: <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 were cookies records before offset += search.length; // Set the start position of the cookie end = documents.cookie.indexOf(";", offset); // Set the end 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: <body > //Popt out when leaving the page
Or: <body > //The effect of pop-up window pops up when the page pops up when leaving the page:
Effect: When others close this page, a window pops up, and you can write some blessing words
Core code:
The code is as follows:
<script LANGUAGE="javascript"> <!--Begin function leave(){ window.open ('1.htm',",'toolbar=no,menubar=no,location=no,height=225,width=235'); break } //END--> </script>The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.