Home > Others

Nine kinds of JS pop-up dialog box method summary _javascript Skills

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

"1, the most Basic JS Pop-up dialog box window code"

This is the most Basic JS pop-up dialog box, in fact, the code on a few words very simple:

Copy Code code as follows:

<script language= "JavaScript" >
<!--
window.open ("page.html")
-->
</script>

Because this is a javascripts code, they should be placed between <script language= "JavaScript" > tags and </script>. <!--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,


"2, add the property Settings JS Pop-up dialog Code"

Next Say JS pop-up dialog box window properties settings. Just add something to the code above.
Let's customize this JS pop-up dialog box to pop up the window's appearance, size, and popup position to fit the page's specifics.

Copy Code code as follows:

View Code

<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;
The name of the "NewWindow" pop-up window (not the filename), which is not required, can be replaced with null "".
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, with Function Control JS Pop-up dialog Box window"

The following is a full JS pop-up dialog box code.

Copy Code code as follows:

View Code

<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 onload= "Openwin ()" >
... 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 One: When the browser reads the page pop-up window;

Copy Code code as follows:

<body onload= "Openwin ()" >

Method two: Pop-up window when the browser leaves the page;

Copy Code code as follows:

<body onunload= "Openwin ()" >

Method Three: Call with a connection:

Copy Code code as follows:

<a href= "#" onclick= "Openwin ()" > Open a Window </a>

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

Method Four: Use a button to invoke:

Copy Code code as follows:

<input type= "button" onclick= "Openwin ()" value= "open Window" >

"4, at the same time pop-up 2 Windows JS pop-up dialog box"

Change the source code a little bit:

Copy Code code as follows:

View Code

<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 (NewWindows and NewWindow2) of the 2 JS Pop-up dialog window is not the same, or simply empty.

"5, the main window to open the file 1.htm, while pop-up small Windows page.html"

The following code is added to the main window

Copy Code code as follows:

View Code

<script language= "JavaScript" >
<!--
function Openwin ()
{window.open ("page.html", "", "width=200,height=200")
}
-->
</script>


Join <body> Area:

Copy Code code as follows:

<a href= "1.htm" onclick= "Openwin ()" >open</a>

Can.

"6, JS Pop-up dialog box pop-up window timing shutdown control"

Below we then to the JS Pop-up dialog box of the window to do some control, 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

Copy Code code as follows:

<script language= "JavaScript" >
function Closeit ()
{settimeout ("self.close ()", 10000)//MS}
</script>

Then, then use the <body onload= "Closeit ()" > This sentence to replace page.html Central 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, in the JS Pop-up dialog box window with a close button"

Copy Code code as follows:

<FORM>
<input type= "button" value= "Close" onclick= "Window.close ()" >
</FORM>

Oh, now more perfect!

"8, included in the JS Pop-up dialog box 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.

Copy Code code as follows:

View Code

<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 ("OpenWindow.document.write ("New window opened!")
OpenWindow.document.write ("</BODY>")
OpenWindow.document.write ("</HTML>")
OpenWindow.document.close ()}

</script>
<body>
<a href= "#" onclick= "Openwin ()" > Open a Window </a>
<input type= "button" onclick= "Openwin ()" 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--js Pop-up dialog box of the window 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 need to frequently go through the page (such as home), then each refresh this page, the window will automatically execute JS pop-up dialog code once, is not very annoying? Is there a solution to:-(? yes! ;-) Follow me.

We can use cookies to control it.

First, add the following code to the <HEAD> area of the homepage HTML:

Copy Code code as follows:

View Code

<script>
function Openwin ()
{window.open ("page.html", "", "width=200,height=200")}
function Get_cookie (Name)
{var search = Name + ' = '
var returnvalue = "";
if (Documents.cookie.length > 0) {
offset = documents.cookie.indexOf (search)
if (offset!=-1) {
Offset + = Search.length
End = Documents.cookie.indexOf (";", offset);
if (end = = 1)
end = Documents.cookie.length;
Returnvalue= (documents.cookie.substring (offset,end))
}
}
Return returnvalue;
}
function Loadpopup () {
if (Get_cookie ("popped") = = "") {
Openwin ()
Documents.cookie= "Popped=yes"
}
}
</script>

Then, use the <bodyonload= "Loadpopop ()" > (note not openwin but Loadpop!). Replace the main page in the original <BODY> this sentence can be. You can try to refresh the page or re-enter the page, the window will no longer have the JS pop-up dialog box. The real implementation only bounces once.

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

Above is the nine kinds of JS pop-up dialog box code, if there are other methods can also provide to me oh, of course, I wrote the window is OK.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
windows dialog box example jquery dialog box database enhancement dialog box php dialog box windows dialog box example trials of nine vendor assessment of lagging skills

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More