js實現模態對話框
這篇文章提供給大家分享學習的是關于js實現模態對話框經驗分享，希望能夠幫助到大家。
首先，來說一下對話框
對話框在Windows應用程序中使用非常普遍，許多應用程序的設定，與用戶交互需
要通過對話框來進行，因此對話框是Windows應用程序中最重要的界面元素之一，
是與用戶交互的重要手段。對話框是一個特殊的窗口，任何對窗口進行的操作（
如移動、最大化、最小化等）也可以在對話框實施。
對話框大致可以分為以下兩種。
（1）模態對話框：模態對話框彈出后，獨占了系統資源，用戶只有在關閉該對話
框后才可以繼續執行，不能夠在關閉對話框之前執行應用程序其他部分的代碼。
模態對話框一般要求用戶做出某種選擇。
（2）非模態對話框：非模態對話框彈出后，程序可以在不關閉該對話框的情況下
繼續執行，在轉入到應用程序其他部分的代碼時可以不需要用戶做出響應。非模
態對話框一般用來顯示信息，或者實時地進行一些設置。
模態窗口在傳統編程語言中很常見，簡單的說就是，如果是模態的，就是打開一
個子窗口，如果這個子窗口不關閉，就不能操作它的父窗口，原來程序暫停執行
，直到這個模態窗口關閉后才回到原來程序繼續。
非模態的就是直接顯示出來，然后原來的程序繼續執行下面的語句，而且其他窗
口也呈可用狀態。
模態對話框獨占了用戶的輸入，當一個模態對話框打開時，用戶只能與該對話框
進行交互，而其他用戶界面對象收不到輸入信息。應用程序用到的大部分對話框
都是模態對話框。
通常瀏覽器中windwo.open或超鏈接彈出的新窗口就是非模式窗口,而模式窗口是
類似alert那種必須關閉才能響應其他事件的窗口。
明白了對話框的模態和非模態，來看下邊
在B/s結構應用程序的開發中,有時我們會希望使用者按下按鈕后開啟一個保持在
原窗口前方的子窗口,
在IE中,我們可以使用
window.showModelessDialog()方法用來創建一個顯示HTML內容的非模態對話框。
window.showModalDialog()方法用來創建一個顯示HTML內容的模態對話框，由于
是對話框，因此它并沒有一般用window.open()打開的窗口的所有屬性。
這里是window.showModalDialog彈出窗口的一個實例函數:
| <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’)">點擊</span> |
需要注意的是FireFox瀏覽器中不支持showmodaldialog() ，這是因為在最初
MozillaSuite 中（Firefox 是從這個套件衍生），是支持 showmodaldialog()
的，不過后來發現 showmodaldialog() 存在安全隱患，不久后就取消了對
showmodaldialog() 的支持，這個事情還發生在 bug 194404 提交前。在想出更
好的解決方案前，相信 Firefox 是不會提供對 showmodaldialog() 的支持的。
打開彈窗只能使用window.open實現這樣的功能，window.open的語法如下 :
oNewWindow = window.open( [sURL] [, sName] [, sFeatures] [, bReplace])
只是,在Firefox下,window.open的參數中,sFeature多了一些功能設定,要讓
FireFox下開啟的窗口跟IE的showModalDialog一樣的話,
只要在sFeatures中加個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="打開對話框" 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> |
