Home > Developer > JavaScript
Post, used for learning
Javascript pop-up window code Daquan how to use web pages to pop up various forms of windows, I think most people know some, but how to make a variety of pop-up windows, let's take a look at it today:
1. Pop up a full screen window
<HTML>
<Body onload = "window. Open ('HTTP: // www.kunde58.com ', 'example01', 'fullscreen');">;
<B> www.kunde58.com </B>
</Body>
</Html>
2. Pop up a window after F11
<HTML>
<Body onload = "window. Open ('HTTP: // www.kunde58.com ', 'example02', 'channelmode');">;
<B> www.kunde58.com </B>
</Body>
</Html>
3. Pop up a window with the toolbar of the favorite Link
<HTML>
<Body onload = "window. Open ('www .wangye8.com ', 'example03', 'width = 400, Height = 300, directories');">
<B> www.wangye8.com </B>
</Body>
</Html>
4. webpage dialog box
<HTML>
<Script language = "JavaScript">
<! --
Showmodaldialog ('HTTP: // www.kunde58.com, 'example04 ', '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 ('HTTP: // www.kunde58.com, 'example05 ', '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 webpage dialog box. The difference between showmodaldialog () and showmodelessdialog () lies in the window opened by showmodaldialog () (mode window ), set it to the parent window. You must close the window to access the parent window (we recommend that you use it as little as possible to avoid dislike); showmodelessdialog ()
Dialogheight: the height of the window in the iheight Setting dialog box.
Dialogwidth: iwidth: Set the window width in the dialog box.
Dialogleft: Left position in the dialog box relative to the upper left corner of the desktop.
Dialogtop: the top position in the window of the iypos Setting Dialog Box relative to the top 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 box. The default value is "yes ".
Resizable: {Yes | no | 1 | 0} specifies whether the dialog box window size is variable. The default value is "no ".
Status: {Yes | no | 1 | 0} specifies whether the status bar is displayed in the dialog box. For non-mode dialog box windows, the default value is "yes"; for mode dialog box windows, the default value is "no ".
5. Other pop-up window Codes
A friend who frequently accesses the Internet may have visited such websites. A window will pop up immediately upon entry of the home page, or a link 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 create such a page. You only need to add several Java Script codes to the HTML of the page. Next I will take you through its mysteries.
[Basic pop-up window Code]
In fact, the code is very simple:
<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"> label and </SCRIPT>. <! -- And --> are used for some earlier browsers. If Java scripts are not supported in these old browsers, the code in the tag is not displayed as text.
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, specify the path, absolute path (http: //), and relative path.
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, or between
[Pop-up window after setting]
Let's talk about the settings of the pop-up window appearance. 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 = "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 a row
-->
</SCRIPT>
Parameter description:
<Script language = "Java Script"> the JS script starts;
Window. Open command to pop up a new window;
The file name of the new window is displayed in page.html;
The name (not the file name) of the newwindow pop-up window, which can be replaced by "null;
Height = 100 window height;
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> the JS script ends.
[Function control pop-up window]
The following is a complete code.
<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 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 = "openwen ()"> A window pops up when the browser reads the page;
Method 2: <body onUnload = "openwen ()"> 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">
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 = "Java Script">
<! --
Function openwin (){
Window. Open ("page.html", "", "width = 200, Height = 200"
}
// -->
</SCRIPT>
Join the <body> area: <a href = "1.htm" onclick =" openwin () "> open </a>.
[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 homepage, otherwise ...), It's cool to make it automatically shut down in 10 seconds?
First, add the following code to the <Script language = "Java Script">
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 .)
[Add a close button in the pop-up window]
<Form>
<Input type = 'button 'value = 'Close 'onclick = 'window. Close ()'>
</Form>
Now it's more perfect!
Pop-up window included in -- 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 = "Java Script">
Function openwin ()
{
OpenWindow = Window. open ("", "newwin", "Height = 250, width = 250, toolbar = No, scrollbars =" + scroll + ", menubar = No ";);
// Write a row
Openmediaworkflow Doc 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 may occur if one or more tags exist. Use openmediaworkflow Doc ument. Close.
[Ultimate application-Cookie control in the pop-up window]
In retrospect, although the pop-up window above is cool, there is a small problem (You are immersed in joy, do you have not found 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? Yes! Follow me. We can use cookies to control it.
First, add the following code to the
<SCRIPT>
Function openpopup (){
Window. Open ("hello.htm", "", "width = 300, Height = 300") // modify the window by yourself
}
Function get_cookie (name ){
VaR search = Name + "="
VaR returnvalue = "";
If (events. 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 (events. Cookie. substring (offset, end ))
}
}
Return returnvalue;
}
Function loadpopup (){
If (get_cookie ('popped') = ''){
Openpopup ()
Documents. Cookie = "popped = yes"
}
}
</SCRIPT>
</Head>
Type the following code into the body area:
<Body onUnload = "loadpopup ()"> // pop when leave page
Or:
<Body onload = "loadpopup ()"> // pop when enter page
You can refresh the page or enter the page again, and the window will no longer pop up. Real pop-only-once!
Here, the creation and application skills of the pop-up window are basically finished, and I am very pleased to be helpful to my friends who are making web pages.
Note that the case sensitivity of JavaScript scripts should be consistent.
There is no pop-up window for menus, toolbar, and address bar:
<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 indicates the window length and width.
If (popup! = NULL ){
If (Popup. Opener = NULL ){
Popup. Opener = self ;}
Popup. Location. href = 'file name to open ';
}
// -->
</SCRIPT>
Method 2: cookies application: control the pop-up window. When a pop-up window is set in a page, the pop window automatically pops up every time you browse the page again, this causes unnecessary trouble. So how can we solve this problem? Here I will use a simple example to explain how to use cookies to make the pop-up window pop-up only when you first browse the page. It will not be annoying in the future!
<SCRIPT> function openpopwindow () {window. open ("hello.htm", "", "width = 200, Height = 200" // modify the window by yourself} function get_cookie (name) {var search = Name + "= "; vaR returnvalue = ""; if (events. cookie. length> 0) {offset = documents. cookie. indexof (Search); If (offset! =-1) {// if the previous cookie record Offset + = search. length; // set the start position of the cookie. End = documents. cookie. indexof (";", offset); // set the cookie end position if (END =-1) End = documents. cookie. length; returnvalue = Unescape (events. cookie. substring (offset, end)} return returnvalue;} function loadpopup () {If (get_cookie ('popped') = '') {openpopwindow (); events. cookie = "popped = yes" ;}}</SCRIPT>
Type the above Code in the body area: <body onUnload = "loadpopup ()"> // when you exit the page
Or: <body onload = "loadpopup ()"> // when the page is opened
[This article is copyrighted by the author and osuo. If you need to reprint it, please indicate the author and its source]
When you exit the page, the window is displayed:
Effect: when someone else closes this page, a window pops up. You can write some blessings.
Core code:
<Script language = "JavaScript">
<! -- Begin function leave (){
Window. Open
('1.htm', ", 'toolbar = No, menubar = No, location = No, Height = 225, width = 235 ');
Break
}
// End -->
</SCRIPT>
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
