Home > Developer > Web Develop

Summary of methods for JS popup dialog box

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

Original: http://www.cnblogs.com/xiaofengfeng/archive/2012/10/20/2732784.html

<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>三种弹出对话框的用法实例</title><scriptlanguage="javascript">function ale(){        //这个基本没有什么说的，就是弹出一个提醒的对话框     alert("我敢保证，你现在用的是演示一");}function firm(){        //利用对话框返回的值 （true 或者 false）    if(confirm("你确信要转去风亦飞的博客？"))    {            //如果是true ，那么就把页面转向thcjp.cnblogs.com        location.href="http://blog.csdn.net/fengyifei11228/";     }    else    {        //否则说明下了，赫赫      alert("你按了取消，那就是返回false");    }}function prom(){    var name=prompt("请输入您的名字","");//将输入的内容赋给变量 name ，    //这里需要注意的是，prompt有两个参数，前面是提示的话，后面是当对话框出来后，在对话框里的默认值    if(name)//如果返回的有内容     {         alert("欢迎您："+ name)     }}</script></head><body><p>对话框有三种</p><p>1：只是提醒，不能对脚本产生任何改变；</p><p>2：一般用于确认，返回 true 或者 false ，所以可以轻松用于 ifelse判断 </p><p>3： 一个带输入的对话框，可以返回用户填入的字符串，常见于某些留言本或者论坛输入内容那里的 插入UBB格式图片 </p><p>下面我们分别演示：</p><p>演示一：提醒 对话框</p><p>   <inputtype="submit" name="Submit" value="提交" onclick="ale()" /></p><p>演示二 ：确认对话框 </p><p>  <inputtype="submit" name="Submit2" value="提交" onclick="firm()" /></p><p>演示三 ：要求用户输入，然后给个结果</p><p>  <inputtype="submit" name="Submit3" value="提交" onclick="prom()" /></p></body></html>

Original: http://www.jb51.net/article/34720.htm

Nine kinds of JS Pop-up dialog method Summary, the need for friends can refer to

"1, the most Basic JS Popup dialog window Code"

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

Copy CodeThe code is 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 is useful for browsers with low versions, where the code in the tags is not displayed as text in these old browsers. It's a good habit to develop.

window.open ("page.html") is used to control the popup of a new window page.html, if page.html is not in the same path as the main window, the path, absolute path (http://) and relative path (. /) are available. You can use both single and double quotes, just don't mix.
This piece of code can be added anywhere in the HTML,


"2, add the property Settings JS Popup Dialog Code"

Let's talk about the settings for the JS Popup dialog window properties. Just add a little something to the code above.
Let's customize this JS popup dialog box to pop up the window's appearance, size, pop-up position to fit the specific situation of the page.

Copy CodeThe code is 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 start;
window.open the command that pops up the new window;
The filename of the "page.html" pop-up window;
"NewWindow" pop-up window name (not file name), non-mandatory, free "" instead;
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 is displayed;
Menubar,scrollbars represents the menu bar and scroll bar.
Resizable=no whether the window size is allowed to change, yes is allowed;
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 already open), yes is allowed;
</script> JS script End

"3, use Function Control JS Popup dialog Window"

Below is the code for a full JS popup dialog box.

Copy CodeThe code is 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 invoke it?
Method One: The browser reads the page when the popup window;

Copy CodeThe code is as follows:
<body onload= "Openwin ()" >
Method Two: Pop-up window when the browser leaves the page;

Copy CodeThe code is as follows:
<body onunload= "Openwin ()" >
Method Three: Call with a connection:

Copy CodeThe code is as follows:
<a href= "#" onclick= "Openwin ()" > Open a Window </a>

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

Method Four: Call with a button:

Copy CodeThe code is as follows:
<input type= "button" onclick= "Openwin ()" value= "open Window" >

"4, simultaneously pops up 2 windows The JS popup dialog box"

Change the source code slightly:

Copy CodeThe code is 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 pop-up of the 2 window overlay, use top and left to control the pop-up position do not cover each other. Finally, the four methods mentioned above can be called.

Note: The name (NewWindows and NewWindow2) of the 2 JS Pop-up dialog windows are not the same, or simply empty.

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

Add the following code to the main window

Copy CodeThe code is as follows:
View Code

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


Join <body> Area:

Copy CodeThe code is as follows:
<a href= "1.htm" onclick= "Openwin ()" >open</a>

Can.

"6, JS Pop-up Dialog popup window of the timing of the closed control"

Below we again on the JS Popup dialog window for some control, the effect is better. If we add a little piece of code to the pop-up page (note that it's added to Page.html's HTML, not the main page, otherwise ...), will it be cooler to turn it off automatically after 10 seconds?

First, add the following code to the

Copy CodeThe code is as follows:
<script language= "JavaScript" >
function Closeit ()
{SetTimeout ("self.close ()", 10000)//msec}
</script>
Then, and then use <body onload= "Closeit ()" > This sentence instead of page.html Zhongyuan Some <BODY> this sentence can be. (This sentence must not forget to write Ah!) The function of this sentence is to invoke the code that closes the window, and then close the window on its own after 10 seconds. )

"7, add a close button in the JS Popup dialog Window"

Copy CodeThe code is as follows:
<FORM>
<input type= "button" value= "Close" onclick= "Window.close ()" >
</FORM>
Oh, now more perfect!

"8, contains the JS Popup dialog Window-a page of two windows"

The example above contains two windows, one is the main window and the other is a small pop-up window.

In the following example, you can perform the above effect on a page.

Copy CodeThe code is 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 the standard HTML? Just write more lines in the format. Pay attention to one more label or one less tag and there will be an error. Remember to end with OpenWindow.document.close ().

"9, the Ultimate Application--js Popup dialog window of the cookie control"

Recall that the above pop-up window, although cool, but a little bit of a problem (immersed in joy, must not find it?) For example, if you put the above script in a frequently required page (such as the homepage), then each time you refresh the page, the window will automatically execute the JS popup dialog box code once, is not very annoying? :-(, is there a way out? yes! ;-) Follow me.

We can use cookies to control it.

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

Copy CodeThe code is 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, with <bodyonload= "Loadpopop ()" > (note not openwin but Loadpop!) Replace the main Page <BODY> this sentence can be. You can try to refresh this page or re-enter the page, the window will no longer have the JS popup dialog box. The real implementation only bounces once.

It is important to note that the case in the JS script is best and always consistent.

The above is the nine kinds of JS Pop-up dialog code, if there are other methods can also be provided to me oh, of course, my own writing of the pop-up window is OK.

Summary of methods for JS popup dialog box

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 php alert popup box js popup div

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