js實(shí)現(xiàn)模態(tài)對(duì)話框
這篇文章提供給大家分享學(xué)習(xí)的是關(guān)于js實(shí)現(xiàn)模態(tài)對(duì)話框經(jīng)驗(yàn)分享，希望能夠幫助到大家。
首先，來說一下對(duì)話框
對(duì)話框在Windows應(yīng)用程序中使用非常普遍，許多應(yīng)用程序的設(shè)定，與用戶交互需
要通過對(duì)話框來進(jìn)行，因此對(duì)話框是Windows應(yīng)用程序中最重要的界面元素之一，
是與用戶交互的重要手段。對(duì)話框是一個(gè)特殊的窗口，任何對(duì)窗口進(jìn)行的操作（
如移動(dòng)、最大化、最小化等）也可以在對(duì)話框?qū)嵤?nbsp;
對(duì)話框大致可以分為以下兩種。
（1）模態(tài)對(duì)話框：模態(tài)對(duì)話框彈出后，獨(dú)占了系統(tǒng)資源，用戶只有在關(guān)閉該對(duì)話
框后才可以繼續(xù)執(zhí)行，不能夠在關(guān)閉對(duì)話框之前執(zhí)行應(yīng)用程序其他部分的代碼。
模態(tài)對(duì)話框一般要求用戶做出某種選擇。
（2）非模態(tài)對(duì)話框：非模態(tài)對(duì)話框彈出后，程序可以在不關(guān)閉該對(duì)話框的情況下
繼續(xù)執(zhí)行，在轉(zhuǎn)入到應(yīng)用程序其他部分的代碼時(shí)可以不需要用戶做出響應(yīng)。非模
態(tài)對(duì)話框一般用來顯示信息，或者實(shí)時(shí)地進(jìn)行一些設(shè)置。
模態(tài)窗口在傳統(tǒng)編程語言中很常見，簡單的說就是，如果是模態(tài)的，就是打開一
個(gè)子窗口，如果這個(gè)子窗口不關(guān)閉，就不能操作它的父窗口，原來程序暫停執(zhí)行
，直到這個(gè)模態(tài)窗口關(guān)閉后才回到原來程序繼續(xù)。
非模態(tài)的就是直接顯示出來，然后原來的程序繼續(xù)執(zhí)行下面的語句，而且其他窗
口也呈可用狀態(tài)。
模態(tài)對(duì)話框獨(dú)占了用戶的輸入，當(dāng)一個(gè)模態(tài)對(duì)話框打開時(shí)，用戶只能與該對(duì)話框
進(jìn)行交互，而其他用戶界面對(duì)象收不到輸入信息。應(yīng)用程序用到的大部分對(duì)話框
都是模態(tài)對(duì)話框。
通常瀏覽器中windwo.open或超鏈接彈出的新窗口就是非模式窗口,而模式窗口是
類似alert那種必須關(guān)閉才能響應(yīng)其他事件的窗口。
明白了對(duì)話框的模態(tài)和非模態(tài)，來看下邊
在B/s結(jié)構(gòu)應(yīng)用程序的開發(fā)中,有時(shí)我們會(huì)希望使用者按下按鈕后開啟一個(gè)保持在
原窗口前方的子窗口,
在IE中,我們可以使用
window.showModelessDialog()方法用來創(chuàng)建一個(gè)顯示HTML內(nèi)容的非模態(tài)對(duì)話框。
window.showModalDialog()方法用來創(chuàng)建一個(gè)顯示HTML內(nèi)容的模態(tài)對(duì)話框，由于
是對(duì)話框，因此它并沒有一般用window.open()打開的窗口的所有屬性。
這里是window.showModalDialog彈出窗口的一個(gè)實(shí)例函數(shù):
| <script type="text/javascript"> function openWin(src, width, height, showScroll){ window.showModalDialog (src,"","location:No;status:No;help:No;dialogWidth:"+width+";dialogHeig ht:"+height+";scroll:"+showScroll+";"); } </script> 例：<span style="CURSOR: pointer" onclick="openWin (’http://www.deepteach.com’, ’500px’, ’400px’, ’no’)">點(diǎn)擊</span> |
需要注意的是FireFox瀏覽器中不支持showmodaldialog() ，這是因?yàn)樵谧畛?nbsp;
MozillaSuite 中（Firefox 是從這個(gè)套件衍生），是支持 showmodaldialog()
的，不過后來發(fā)現(xiàn) showmodaldialog() 存在安全隱患，不久后就取消了對(duì)
showmodaldialog() 的支持，這個(gè)事情還發(fā)生在 bug 194404 提交前。在想出更
好的解決方案前，相信 Firefox 是不會(huì)提供對(duì) showmodaldialog() 的支持的。
打開彈窗只能使用window.open實(shí)現(xiàn)這樣的功能，window.open的語法如下 :
oNewWindow = window.open( [sURL] [, sName] [, sFeatures] [, bReplace])
只是,在Firefox下,window.open的參數(shù)中,sFeature多了一些功能設(shè)定,要讓
FireFox下開啟的窗口跟IE的showModalDialog一樣的話,
只要在sFeatures中加個(gè)modal=yes就可以了,也許可能是出于安全考慮modal=yes
打開的并不是模式窗口
范例如下:
| window.open (’openwin.html’,'newWin’, 'modal=yes, width=200,height=200,resizable=no, scrollbars=no’ ); |
由于在firefox沒有showModalDialog方法。則用如下判斷來兼容兩種瀏覽器：
| <input type="button" value="打開對(duì)話框" onclick="showDialog('#')"/> <SCRIPT LANGUAGE="JavaScript"> <!-- function showDialog(url) { if( document.all ) //IE { feature="dialogWidth:300px;dialogHeight:200px;status:no;help:no"; window.showModalDialog(url,null,feature); } else { //modelessDialog可以將modal換成dialog=yes feature ="width=300,height=200,menubar=no,toolbar=no,location=no,"; feature+="scrollbars=no,status=no,modal=yes"; window.open(url,null,feature); } } //--> </SCRIPT> |
