js彈出框、對話框、提示框、彈窗總結

一、JS的三種最常見的對話框

[javascript]
view plain
copy

1. //======================JS最常用三種彈出對話框========================
3. //彈出對話框并輸出一段提示信息
4. functionale(){
5. //彈出一個對話框
6. alert(“提示信息！”);
8. }
10. //彈出一個詢問框，有確定和取消按鈕
11. functionfirm(){
12. //利用對話框返回的值（true或者false）
13. if(confirm(“你確定提交嗎？”)){
14. alert(“點擊了確定”);
15. }
16. else{
17. alert(“點擊了取消”);
18. }
20. }
22. //彈出一個輸入框，輸入一段文字，可以提交
23. functionprom(){
24. varname=prompt(“請輸入您的名字”,“”);//將輸入的內容賦給變量name，
26. //這里需要注意的是，prompt有兩個參數，前面是提示的話，后面是當對話框出來后，在對話框里的默認值
27. if(name)//如果返回的有內容
28. {
29. alert(“歡迎您：”+name)
30. }
32. }

二、點擊按鈕時常用的6中提示框和操作

[html]
view plain
copy

1. <!———–按鈕提示框———->
2. <inputtype=“button”name=“btn2”id=“btn2”value=“刪除”onclick=”returnconfirm(‘Yes/No’););
4. <!———–按鈕提示框———->
5. <inputtype=“button”name=“btn2”id=“btn2”value=“提示”onclick=”javaScript:alert(‘您確定要刪除嗎？’);
7. <!———–提交按鈕———->
8. <inputtype=“button”value=“提交”onclick=“javaScript:window.location.href=’http://www.baidu.com’;”/>
10. <!———–關閉按鈕———->
11. <inputtype=“button”value=“關閉”onclick=“javaScript:window.close();”>
13. <!———–返回并關閉連接———->
14. <ahref=“#”onclick=“javascript:;window.opener.location.reload();window.close()”>返回</a>
15. javaScript:window.location.reload();//返回當前頁并刷新
17. <!———–返回上一級頁面———->
18. <inputtype=“button”name=“button”value=“<返回”onclick=“javascript:history.go(-1)”/>

三、彈出獨立窗口

[javascript]
view plain
copy

1. //關閉,父窗口彈出對話框,子窗口直接關閉
2. this.Response.Write(“<scriptlanguage=javascript>window.close();</script>”);
4. //關閉,父窗口和子窗口都不彈出對話框,直接關閉
5. this.Response.Write(“<script>”);
6. this.Response.Write(“{top.opener=null;top.close();}”);
7. this.Response.Write(“</script>”);
9. //彈出窗口刷新當前頁面width=200height=200菜單。菜單欄,工具條,地址欄,狀態欄全沒有
10. this.Response.Write(“<scriptlanguage=javascript>window.open(‘rows.aspx’,’newwindow’,’width=200,height=200′)</script>”);
12. //彈出窗口刷新當前頁面
13. this.Response.Write(“<scriptlanguage=javascript>window.open(‘rows.aspx’)</script>”);
14. this.Response.Write(“<script>window.open(‘WebForm2.aspx’,’_blank’);</script>”);
16. //彈出提示窗口跳到webform2.aspx頁(在一個IE窗口中)
17. this.Response.Write(”<scriptlanguage=javascript>alert(‘注冊成功’);window.window.location.href=’WebForm2.aspx’;</script>“);
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>”);
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>”);
27. //彈出提示窗口.確定后彈出子窗口(WebForm2.aspx)
28. this.Response.Write(“<scriptlanguage=’javascript’>alert(‘發表成功！’);window.open(‘WebForm2.aspx’)</script>”);
30. //彈出提示窗口,確定后,刷新父窗口
31. this.Response.Write(“<script>alert(‘發表成功！’);window.opener.location.href=window.opener.location.href;</script>”);
33. //彈出相同的一頁
34. <INPUTtype=“button”value=“Button”οnclick=“javascript:window.open(window.location.href)”>
36. //
37. Response.Write(“parent.mainFrameBottom.location.href=’yourwebform.aspx?temp=”+str+“‘;”);
40. <SCRIPTLANGUAGE=“javascript”>
41. <!–
42. 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’)//這句要寫成一行
43. –>

參數解釋：

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’:隱藏菜單欄地址欄工具條

四、彈出窗口實例演示

[javascript]
view plain
copy

1. //1、最基本的彈出窗口代碼
3. window.open(‘page.html’)
6. //2、經過設置后的彈出窗口
8. 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’)//這句要寫成一行
11. //參數解釋：
12. //window.open彈出新窗口的命令；
13. //’page.html’彈出窗口的文件名；
14. //’newwindow’彈出窗口的名字（不是文件名），非必須，可用空”代替；
15. //height=100窗口高度；
16. //width=400窗口寬度；
17. //top=0窗口距離屏幕上方的象素值；
18. //left=0窗口距離屏幕左側的象素值；
19. //toolbar=no是否顯示工具欄，yes為顯示；
20. //menubar，scrollbars表示菜單欄和滾動欄。
21. //resizable=no是否允許改變窗口大小，yes為允許；
22. //location=no是否顯示地址欄，yes為允許；
23. //status=no是否顯示狀態欄內的信息（通常是文件已經打開），yes為允許；
25. //3、用函數控制彈出窗口
27. functionopenwin(){
28. window.open(“page.html”,“newwindow”,“height=100,width=400,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no”)//寫成一行
29. }
30. $(document).ready(fucntion(){
31. openwin();
32. });
34. //這里定義了一個函數openwin(),函數內容就是打開一個窗口。在調用它之前沒有任何用途。怎么調用呢？
36. //方法一：<bodyοnlοad=”openwin()”>瀏覽器讀頁面時彈出窗口；
37. //方法二：<bodyοnunlοad=”openwin()”>瀏覽器離開頁面時彈出窗口；
38. //方法三：用一個連接調用：
39. //<ahref=”#”οnclick=”openwin()”>打開一個窗口</a>
40. //注意：使用的“#”是虛連接。
41. //方法四：用一個按鈕調用：
42. //<inputtype=”button”οnclick=”openwin()”value=”打開窗口”>
44. //4、同時彈出2個窗口
46. functionopenwin(){
47. 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”)//寫成一行
48. 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”)//寫成一行
49. }
51. //為避免彈出的2個窗口覆蓋，用top和left控制一下彈出的位置不要相互覆蓋即可。最后用上面說過的四種方法調用即可。
52. //注意：2個窗口的name(newwindows和newwindow2)不要相同，或者干脆全部為空。
54. //5、主窗口打開文件1.htm，同時彈出小窗口page.html
56. functionopenwin(){
57. window.open(“page.html”,“”,“width=200,height=200”)
58. }
60. //調用：<ahref=”1.htm”οnclick=”openwin()”>open</a>
62. //6、彈出的窗口之定時關閉控制
64. //下面我們再對彈出的窗口進行一些控制，效果就更好了。如果我們再將一小段代碼加入彈出的頁面(注意是加入page.html的HTML中，不是主頁面中)，讓它10秒后自動關閉是不是更酷了？
65. //首先，將如下代碼加入page.html文件的<head>區：
66. functioncloseit(){
67. setTimeout(“self.close()”,10000)//毫秒
68. }
69. //頁面加載完成調用關閉事件
70. $(document).ready(fucntion(){
71. closeit();
72. });
74. //7、在彈出窗口中加上一個關閉按鈕
76. //<INPUTTYPE=’BUTTON’VALUE=’關閉’onClick=’window.close()’>
79. //8、內包含的彈出窗口-一個頁面兩個窗口
81. //上面的例子都包含兩個窗口，一個是主窗口，另一個是彈出的小窗口。通過下面的例子，你可以在一個頁面內完成上面的效果。
83. functionopenwin(){
84. OpenWindow=window.open(“”,“newwin”,“height=250,width=250,toolbar=no,scrollbars=”+scroll+“,menubar=no”);
85. //寫成一行
86. OpenWindow.document.write(“<TITLE>例子</TITLE>”)
87. OpenWindow.document.write(“<BODYBGCOLOR=#ffffff>”)
88. OpenWindow.document.write(“<h1>Hello!</h1>”)
89. OpenWindow.document.write(“Newwindowopened!”)
90. OpenWindow.document.write(“</BODY>”)
91. OpenWindow.document.write(“</HTML>”)
92. OpenWindow.document.close()
93. }
95. //<ahref=”#”οnclick=”openwin()”>打開一個窗口</a>
96. //<inputtype=”button”οnclick=”openwin()”value=”打開窗口”>
99. //9、終極應用–彈出的窗口之Cookie控制
101. //回想一下，上面的彈出窗口雖然酷，但是有一點小毛病，比如你將上面的腳本放在一個需要頻繁經過的頁面里(例如首頁)，那么每次刷新這個頁面，窗口都會彈出一次，我們使用cookie來控制一下就可以了。
102. //首先，將如下代碼加入主頁面HTML的<HEAD>區：
104. functionopenwin(){
105. window.open(“page.html”,“”,“width=200,height=200”)
106. }
107. functionget_cookie(Name){
108. varsearch=Name+“=”
109. varreturnvalue=“”;
110. if(document.cookie.length>0){
111. offset=document.cookie.indexOf(search)
112. if(offset!=-1){
113. offset+=search.length
114. end=document.cookie.indexOf(“;”,offset);
115. if(end==-1)
116. end=document.cookie.length;
117. returnvalue=unescape(document.cookie.substring(offset,end))
118. }
119. }
120. returnreturnvalue;
121. }
122. functionloadpopup(){
123. if(get_cookie(‘popped’)==”){
124. openwin()
125. document.cookie=“popped=yes”
126. }
127. }
129. //然后，用<bodyοnlοad=”loadpopup()”>（注意不是openwin而是loadpop啊！）替換主頁面中原有的<BODY>這一句即可。你可以試著刷新一下這個頁面或重新進入該頁面，窗口再也不會彈出了。真正的Pop-Only-Once！

總結

以上是生活随笔為你收集整理的js弹出框、对话框、提示框、弹窗总结[通俗易懂]的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。