js弹窗

布满荆棘的人生 2022-06-10 09:47 288阅读 0赞

**js的三种最常见的对话框**

**\[javascript\]**  [view plain][][copy][view plain]

1.  //====================== JS最常用三种弹出对话框 ========================  
2.    
3.      //弹出对话框并输出一段提示信息  
4.      **function** ale() \{  
5.          //弹出一个对话框  
6.          alert("提示信息！");  
7.    
8.      \}  
9.    
10.     //弹出一个询问框，有确定和取消按钮  
11.     **function** firm() \{  
12.         //利用对话框返回的值 （true 或者 false）  
13.         **if** (confirm("你确定提交吗？")) \{  
14.             alert("点击了确定");  
15.         \}  
16.         **else** \{  
17.             alert("点击了取消");  
18.         \}  
19.   
20.     \}  
21.   
22.     //弹出一个输入框，输入一段文字，可以提交  
23.     **function** prom() \{  
24.         **var** name = prompt("请输入您的名字", ""); //将输入的内容赋给变量 name ，  
25.   
26.         //这里需要注意的是，prompt有两个参数，前面是提示的话，后面是当对话框出来后，在对话框里的默认值  
27.         **if** (name)//如果返回的有内容  
28.         \{  
29.             alert("欢迎您：" + name)  
30.         \}  
31.   
32.     \}

**点击按钮时常用的6中提示框和操作**

**\[html\]**  [view plain][][copy][view plain]

1.    
2.  **<****input** type="button" name="btn2" id="btn2" value="删除" onclick="return confirm('Yes/No'););  
3.    
4.     
5.  **<****input** type="button" name="btn2" id="btn2" value="提示" onclick="javaScript:alert('您确定要删除吗？');  
6.    
7.     
8.  **<****input** type="button" value="提交" onclick="javaScript:window.location.href='http://www.baidu.com';"**/>**  
9.    
10.    
11. **<****input** type="button" value="关闭" onclick="javaScript:window.close();"**>**  
12.   
13.    
14. **<****a** href="\#" onclick="javascript:;window.opener.location.reload();window.close()"**>**返回**</****a****>**  
15. javaScript:window.location.reload();//返回当前页并刷新  
16.   
17.    
18. **<****input** type="button" name="button" value="< 返回" onclick="javascript:history.go(-1)"**/>**

**弹出独立窗口**

**\[javascript\]**  [view plain][][copy][view plain]

1.  //关闭,父窗口弹出对话框,子窗口直接关闭   
2.  **this**.Response.Write("<script language=javascript>window.close();</script>");  
3.    
4.  //关闭,父窗口和子窗口都不弹出对话框,直接关闭   
5.  **this**.Response.Write("<script>");   
6.  **this**.Response.Write("\{top.opener =null;top.close();\}");   
7.  **this**.Response.Write("</script>");  
8.    
9.  //弹出窗口刷新当前页面width=200 height=200菜单。菜单栏,工具条,地址栏,状态栏全没有   
10. **this**.Response.Write("<script language=javascript>window.open('rows.aspx','newwindow','width=200,height=200')</script>");  
11.   
12. //弹出窗口刷新当前页面   
13. **this**.Response.Write("<script language=javascript>window.open('rows.aspx')</script>");  
14. **this**.Response.Write("<script>window.open('WebForm2.aspx','\_blank');</script>");  
15.   
16. //弹出提示窗口跳到webform2.aspx页(在一个IE窗口中)   
17. **this**.Response.Write(" <script language=javascript>alert('注册成功');window.window.location.href='WebForm2.aspx';</script> ");  
18.   
19. //关闭当前子窗口,刷新父窗口   
20. **this**.Response.Write("<script>window.opener.location.href=window.opener.location.href;window.close();</script>");  
21. **this**.Response.Write("<script>window.opener.location.replace(window.opener.document.referrer);window.close();</script>");  
22.   
23. //子窗口刷新父窗口   
24. **this**.Response.Write("<script>window.opener.location.href=window.opener.location.href;</script>");  
25. **this**.Response.Write("<script>window.opener.location.href='WebForm1.aspx';</script>");  
26.   
27. //弹出提示窗口.确定后弹出子窗口(WebForm2.aspx)   
28. **this**.Response.Write("<script language='javascript'>alert('发表成功！');window.open('WebForm2.aspx')</script>");  
29.   
30. //弹出提示窗口,确定后,刷新父窗口   
31. **this**.Response.Write("<script>alert('发表成功！');window.opener.location.href=window.opener.location.href;</script>");  
32.   
33. //弹出相同的一页   
34. <INPUT type="button" value="Button" οnclick="javascript:window.open(window.location.href)">  
35.   
36. //   
37. Response.Write("parent.mainFrameBottom.location.href='yourwebform.aspx?temp=" +str+"';");  
38.   
39.   
40. <SCRIPT LANGUAGE="javascript">   
41.

**   参数解释：**

**window.open 弹出新窗口的命令；   
'page.html' 弹出窗口的文件名；   
'newwindow' 弹出窗口的名字（不是文件名），非必须，可用空''代替；   
　　height=100 窗口高度；   
　　width=400 窗口宽度；   
　　top=0 窗口距离屏幕上方的象素值；   
　　left=0 窗口距离屏幕左侧的象素值；   
　　toolbar=no 是否显示工具栏，yes为显示；   
　　menubar，scrollbars 表示菜单栏和滚动栏。   
　　resizable=no 是否允许改变窗口大小，yes为允许；   
　　location=no 是否显示地址栏，yes为允许；   
　　status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；**

**'newwin':隐藏菜单栏地址栏工具条 **

1、最基本的弹出窗口代码

**\[javascript\]**[view plain][view plain 1] [ copy][view plain 1]

1.  <SCRIPT LANGUAGE="javascript">  
2.    
5.  </SCRIPT>

因为这是一段javascripts代码，所以它们应该放在<SCRIPT LANGUAGE="javascript">标签和</script>之间。是对一些版本低的浏览器起作用，在这些老浏览器中不会将标签中的代码作为文本显示出来。要养成这个好习惯啊。window.open ('page.html') 用于控制弹出新的窗口page.html，如果page.html不与主窗口在同一路径下，前面应写明路径，绝对路径(http://)和相对路径(.. /)均可。用单引号和双引号都可以，只是不要混用。这一段代码可以加入HTML的任意位置，<head>和</head>之间可以，<body>间</body>也可以，越前越早执行，尤其是页面代码长，又想使页面早点弹出就尽量往前放。  
　  
　 2、经过设置后的弹出窗口  
　　  
　　下面再说一说弹出窗口的设置。只要再往上面的代码中加一点东西就可以了。 我们来定制这个弹出的窗口的外观，尺寸大小，弹出的位置以适应该页面的具体情况。

**\[javascript\]**[view plain][view plain 1] [ copy][view plain 1]

1.  <SCRIPT LANGUAGE="javascript">  
2.    
6.  </SCRIPT>

参数解释：  
　　  
　　<SCRIPT LANGUAGE="javascript"> js脚本开始；  
　　window.open 弹出新窗口的命令；  
　　'page.html' 弹出窗口的文件名；  
　　'newwindow' 弹出窗口的名字（不是文件名），非必须，可用空''代替；  
　　height=100 窗口高度；  
　　width=400 窗口宽度；  
　　top=0 窗口距离屏幕上方的象素值；  
　　left=0 窗口距离屏幕左侧的象素值；  
　　toolbar=no 是否显示工具栏，yes为显示；  
　　menubar，scrollbars 表示菜单栏和滚动栏。  
　　resizable=no 是否允许改变窗口大小，yes为允许；  
　　location=no 是否显示地址栏，yes为允许；  
　　status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；  
　　</SCRIPT> js脚本结束  
　　  
　 3、用函数控制弹出窗口  
  
　　  
　　下面是一个完整的代码：

**\[html\]**[view plain][view plain 1] [ copy][view plain 1]

1.  <html>  
2.  <head>  
3.  <script LANGUAGE="JavaScript">  
4.    
9.  </script>  
10. </head>  
11. <body onload="openwin()">  
12. 任意的页面内容...  
13. </body>  
14. </html>

这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。怎么调用呢？  
  
　　方法一：<body οnlοad="openwin()"> 浏览器读页面时弹出窗口；  
　　方法二：<body οnunlοad="openwin()"> 浏览器离开页面时弹出窗口；  
　　方法三：用一个连接调用：  
　　<a href="\#" οnclick="openwin()">打开一个窗口</a>  
　　注意：使用的“\#”是虚连接。  
　　方法四：用一个按钮调用：  
　　<input type="button" οnclick="openwin()" value="打开窗口">  
　  
　  
　 4、同时弹出2个窗口  
　　  
　　 对源代码稍微改动一下：

**\[javascript\]**[view plain][view plain 1] [ copy][view plain 1]

1.  　　<script LANGUAGE="JavaScript">  
2.    
13. 　　</script>

为避免弹出的2个窗口覆盖，用top和left控制一下弹出的位置不要相互覆盖即可 。最后用上面说过的四种方法调用即可。  
　　注意：2个窗口的name(newwindows和newwindow2)不要相同，或者干脆全部为空。  
   
　 5、主窗口打开文件1.htm，同时弹出小窗口page.html  
  
　　如下代码加入主窗口<head>区：

**\[javascript\]**[view plain][view plain 1] [ copy][view plain 1]

1.  <script language="javascript">  
2.    
7.  </script>

加入<body>区：  
　　<a href="1.htm" οnclick="openwin()">open</a>即可。  
   
　 6、弹出的窗口之定时关闭控制  
　　  
　　下面我们再对弹出的窗口进行一些控制，效果就更好了。如果我们再将一小段 代码加入弹出的页面(注意是加入page.html的HTML中，可不是主页面中，否则 ...)，让它10秒后自动关闭是不是更酷了？  
        首先，将如下代码加入page.html文件的<head>区：

**\[javascript\]**[view plain][view plain 1] [ copy][view plain 1]

1.  <script language="JavaScript">  
2.  function closeit()  
3.  \{  
4.  setTimeout("self.close()",10000) //毫秒  
5.  \}  
6.  </script>

然后，再用<body οnlοad="closeit()"> 这一句话代替page.html中原有的<BODY>这一句就可以了。(这一句话千万不要忘记写啊！这一句的作用是调用关闭窗 口的代码，10秒钟后就自行关闭该窗口。)  
  
　 7、在弹出窗口中加上一个关闭按钮  
  
　　<FORM>  
　　<INPUT TYPE='BUTTON' VALUE='关闭' onClick='window.close()'>

</FORM>

呵呵，现在更加完美了！  
  
　 8、内包含的弹出窗口-一个页面两个窗口  
  
　　上面的例子都包含两个窗口，一个是主窗口，另一个是弹出的小窗口。通过下面的例子，你可以在一个页面内完成上面的效果。

**\[html\]**[view plain][view plain 1] [ copy][view plain 1]

1.  <html>  
2.  　<head>  
3.  　<SCRIPT LANGUAGE="JavaScript">  
4.  　function openwin()  
5.  　\{  
6.  　OpenWindow=window.open("", "newwin", "height=250, width=250,toolbar=no ,scrollbars="+scroll+",menubar=no");  
7.  　//写成一行  
8.  　OpenWindow.document.write("<TITLE>例子</TITLE>")  
9.  　OpenWindow.document.write("<BODY BGCOLOR=\#ffffff>")  
10. 　OpenWindow.document.write("<h1>Hello!</h1>")  
11. 　OpenWindow.document.write("New window opened!")  
12. 　OpenWindow.document.write("</BODY>")  
13. 　OpenWindow.document.write("</HTML>")  
14. 　OpenWindow.document.close()  
15. 　\}  
16. 　</SCRIPT>  
17. 　</head>  
18. 　<body>  
19. 　<a href="\#" onclick="openwin()">打开一个窗口</a>  
20. 　<input type="button" onclick="openwin()" value="打开窗口">  
21. 　</body>  
22. </html>

看看OpenWindow.document.write()里面的代码不就是标准的HTML吗？只要按照 格式写更多的行即可。千万注意多一个标签或少一个标签就会出现错误。记得用 OpenWindow.document.close()结束啊。  
  
　 9、终极应用--弹出的窗口之Cookie控制  
  
　　回想一下，上面的弹出窗口虽然酷，但是有一点小毛病(沉浸在喜悦之中，一定 没有发现吧？)比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页)，那么每次刷新这个页面，窗口都会弹出一次，是不是非常烦人？:-(  
　　有解决的办法吗？Yes! ;-) Follow me.我们使用cookie来控制一下就可以了。  
　　首先，将如下代码加入主页面HTML的<HEAD>区：

**\[javascript\]**[view plain][view plain 1] [ copy][view plain 1]

1.  <script>  
2.  　　function openwin()\{  
3.  　　    window.open("page.html","","width=200,height=200")  
4.  　　\}  
5.  　　function get\_cookie(Name) \{  
6.  　　   var search = Name + "="  
7.  　　   var returnvalue = "";  
8.  　　   if (document.cookie.length > 0) \{  
9.  　　        offset = document.cookie.indexOf(search)  
10. 　　        if (offset != -1) \{  
11. 　　                 offset += search.length  
12. 　　                 end = document.cookie.indexOf(";", offset);  
13. 　　                 if (end == -1)  
14. 　　                      end = document.cookie.length;  
15. 　　               returnvalue=unescape(document.cookie.substring(offset, end))  
16. 　　       \}  
17. 　　  \}  
18. 　　  return returnvalue;  
19. 　　\} 　  
20. 　　function loadpopup()\{  
21.   
22. 　　     if (get\_cookie('popped')=='')\{  
23. 　　          openwin()  
24. 　　          document.cookie="popped=yes"  
25. 　　    \}  
26. 　　\}  
27. 　　</script>

然后，用<body οnlοad="loadpopup()">（注意不是openwin而是loadpop啊！）替换主页面中原有的<BODY>这一句即可。你可以试着刷新一下这个页面或重新进 入该页面，窗口再也不会弹出了。真正的Pop-Only-Once！

[转载自点击打开链接7楼][7]

[view plain]: http://blog.csdn.net/huileiforever/article/details/9464659#
[view plain 1]: http://blog.csdn.net/xjh2011xjh/article/details/22606043#
[7]: http://bbs.csdn.net/topics/280032871