js弹出框、对话框、提示框、弹窗总结[通俗易懂]
生活随笔
收集整理的這篇文章主要介紹了
js弹出框、对话框、提示框、弹窗总结[通俗易懂]
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
js彈出框、對話框、提示框、彈窗總結
一、JS的三種最常見的對話框
[javascript]
view plain
copy
- //======================JS最常用三種彈出對話框========================
- //彈出對話框并輸出一段提示信息
- functionale(){
- //彈出一個對話框
- alert(“提示信息!”);
- }
- //彈出一個詢問框,有確定和取消按鈕
- functionfirm(){
- //利用對話框返回的值(true或者false)
- if(confirm(“你確定提交嗎?”)){
- alert(“點擊了確定”);
- }
- else{
- alert(“點擊了取消”);
- }
- }
- //彈出一個輸入框,輸入一段文字,可以提交
- functionprom(){
- varname=prompt(“請輸入您的名字”,“”);//將輸入的內容賦給變量name,
- //這里需要注意的是,prompt有兩個參數,前面是提示的話,后面是當對話框出來后,在對話框里的默認值
- if(name)//如果返回的有內容
- {
- alert(“歡迎您:”+name)
- }
- }
二、點擊按鈕時常用的6中提示框和操作
[html]
view plain
copy
- <!———–按鈕提示框———->
- <inputtype=“button”name=“btn2”id=“btn2”value=“刪除”onclick=”returnconfirm(‘Yes/No’););
- <!———–按鈕提示框———->
- <inputtype=“button”name=“btn2”id=“btn2”value=“提示”onclick=”javaScript:alert(‘您確定要刪除嗎?’);
- <!———–提交按鈕———->
- <inputtype=“button”value=“提交”onclick=“javaScript:window.location.href=’http://www.baidu.com’;”/>
- <!———–關閉按鈕———->
- <inputtype=“button”value=“關閉”onclick=“javaScript:window.close();”>
- <!———–返回并關閉連接———->
- <ahref=“#”onclick=“javascript:;window.opener.location.reload();window.close()”>返回</a>
- javaScript:window.location.reload();//返回當前頁并刷新
- <!———–返回上一級頁面———->
- <inputtype=“button”name=“button”value=“<返回”onclick=“javascript:history.go(-1)”/>
三、彈出獨立窗口
[javascript]
view plain
copy
- //關閉,父窗口彈出對話框,子窗口直接關閉
- this.Response.Write(“<scriptlanguage=javascript>window.close();</script>”);
- //關閉,父窗口和子窗口都不彈出對話框,直接關閉
- this.Response.Write(“<script>”);
- this.Response.Write(“{top.opener=null;top.close();}”);
- this.Response.Write(“</script>”);
- //彈出窗口刷新當前頁面width=200height=200菜單。菜單欄,工具條,地址欄,狀態欄全沒有
- this.Response.Write(“<scriptlanguage=javascript>window.open(‘rows.aspx’,’newwindow’,’width=200,height=200′)</script>”);
- //彈出窗口刷新當前頁面
- this.Response.Write(“<scriptlanguage=javascript>window.open(‘rows.aspx’)</script>”);
- this.Response.Write(“<script>window.open(‘WebForm2.aspx’,’_blank’);</script>”);
- //彈出提示窗口跳到webform2.aspx頁(在一個IE窗口中)
- this.Response.Write(”<scriptlanguage=javascript>alert(‘注冊成功’);window.window.location.href=’WebForm2.aspx’;</script>“);
- //關閉當前子窗口,刷新父窗口
- this.Response.Write(“<script>window.opener.location.href=window.opener.location.href;window.close();</script>”);
- this.Response.Write(“<script>window.opener.location.replace(window.opener.document.referrer);window.close();</script>”);
- //子窗口刷新父窗口
- this.Response.Write(“<script>window.opener.location.href=window.opener.location.href;</script>”);
- this.Response.Write(“<script>window.opener.location.href=’WebForm1.aspx’;</script>”);
- //彈出提示窗口.確定后彈出子窗口(WebForm2.aspx)
- this.Response.Write(“<scriptlanguage=’javascript’>alert(‘發表成功!’);window.open(‘WebForm2.aspx’)</script>”);
- //彈出提示窗口,確定后,刷新父窗口
- this.Response.Write(“<script>alert(‘發表成功!’);window.opener.location.href=window.opener.location.href;</script>”);
- //彈出相同的一頁
- <INPUTtype=“button”value=“Button”οnclick=“javascript:window.open(window.location.href)”>
- //
- Response.Write(“parent.mainFrameBottom.location.href=’yourwebform.aspx?temp=”+str+“‘;”);
- <SCRIPTLANGUAGE=“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’)//這句要寫成一行
- –>
參數解釋:
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、最基本的彈出窗口代碼
- window.open(‘page.html’)
- //2、經過設置后的彈出窗口
- 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’)//這句要寫成一行
- //參數解釋:
- //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為允許;
- //3、用函數控制彈出窗口
- functionopenwin(){
- window.open(“page.html”,“newwindow”,“height=100,width=400,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no”)//寫成一行
- }
- $(document).ready(fucntion(){
- openwin();
- });
- //這里定義了一個函數openwin(),函數內容就是打開一個窗口。在調用它之前沒有任何用途。怎么調用呢?
- //方法一:<bodyοnlοad=”openwin()”>瀏覽器讀頁面時彈出窗口;
- //方法二:<bodyοnunlοad=”openwin()”>瀏覽器離開頁面時彈出窗口;
- //方法三:用一個連接調用:
- //<ahref=”#”οnclick=”openwin()”>打開一個窗口</a>
- //注意:使用的“#”是虛連接。
- //方法四:用一個按鈕調用:
- //<inputtype=”button”οnclick=”openwin()”value=”打開窗口”>
- //4、同時彈出2個窗口
- functionopenwin(){
- 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”)//寫成一行
- 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”)//寫成一行
- }
- //為避免彈出的2個窗口覆蓋,用top和left控制一下彈出的位置不要相互覆蓋即可。最后用上面說過的四種方法調用即可。
- //注意:2個窗口的name(newwindows和newwindow2)不要相同,或者干脆全部為空。
- //5、主窗口打開文件1.htm,同時彈出小窗口page.html
- functionopenwin(){
- window.open(“page.html”,“”,“width=200,height=200”)
- }
- //調用:<ahref=”1.htm”οnclick=”openwin()”>open</a>
- //6、彈出的窗口之定時關閉控制
- //下面我們再對彈出的窗口進行一些控制,效果就更好了。如果我們再將一小段代碼加入彈出的頁面(注意是加入page.html的HTML中,不是主頁面中),讓它10秒后自動關閉是不是更酷了?
- //首先,將如下代碼加入page.html文件的<head>區:
- functioncloseit(){
- setTimeout(“self.close()”,10000)//毫秒
- }
- //頁面加載完成調用關閉事件
- $(document).ready(fucntion(){
- closeit();
- });
- //7、在彈出窗口中加上一個關閉按鈕
- //<INPUTTYPE=’BUTTON’VALUE=’關閉’onClick=’window.close()’>
- //8、內包含的彈出窗口-一個頁面兩個窗口
- //上面的例子都包含兩個窗口,一個是主窗口,另一個是彈出的小窗口。通過下面的例子,你可以在一個頁面內完成上面的效果。
- functionopenwin(){
- OpenWindow=window.open(“”,“newwin”,“height=250,width=250,toolbar=no,scrollbars=”+scroll+“,menubar=no”);
- //寫成一行
- OpenWindow.document.write(“<TITLE>例子</TITLE>”)
- OpenWindow.document.write(“<BODYBGCOLOR=#ffffff>”)
- OpenWindow.document.write(“<h1>Hello!</h1>”)
- OpenWindow.document.write(“Newwindowopened!”)
- OpenWindow.document.write(“</BODY>”)
- OpenWindow.document.write(“</HTML>”)
- OpenWindow.document.close()
- }
- //<ahref=”#”οnclick=”openwin()”>打開一個窗口</a>
- //<inputtype=”button”οnclick=”openwin()”value=”打開窗口”>
- //9、終極應用–彈出的窗口之Cookie控制
- //回想一下,上面的彈出窗口雖然酷,但是有一點小毛病,比如你將上面的腳本放在一個需要頻繁經過的頁面里(例如首頁),那么每次刷新這個頁面,窗口都會彈出一次,我們使用cookie來控制一下就可以了。
- //首先,將如下代碼加入主頁面HTML的<HEAD>區:
- functionopenwin(){
- window.open(“page.html”,“”,“width=200,height=200”)
- }
- functionget_cookie(Name){
- varsearch=Name+“=”
- varreturnvalue=“”;
- if(document.cookie.length>0){
- offset=document.cookie.indexOf(search)
- if(offset!=-1){
- offset+=search.length
- end=document.cookie.indexOf(“;”,offset);
- if(end==-1)
- end=document.cookie.length;
- returnvalue=unescape(document.cookie.substring(offset,end))
- }
- }
- returnreturnvalue;
- }
- functionloadpopup(){
- if(get_cookie(‘popped’)==”){
- openwin()
- document.cookie=“popped=yes”
- }
- }
- //然后,用<bodyοnlοad=”loadpopup()”>(注意不是openwin而是loadpop啊!)替換主頁面中原有的<BODY>這一句即可。你可以試著刷新一下這個頁面或重新進入該頁面,窗口再也不會彈出了。真正的Pop-Only-Once!
總結
以上是生活随笔為你收集整理的js弹出框、对话框、提示框、弹窗总结[通俗易懂]的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: web service security
- 下一篇: CRM WebUI的错误消息是如何从后台