原文：模態(tài)對話框的支持 （IE,Firefox,Chrome）

?

Opera 和 Chrome 對模態(tài)對話框（showModalDialog）的支持有缺陷，且非 IE 瀏覽器均不支持非模態(tài)對話框（showModelessDialog）

?

標準參考

模態(tài)對話框 和 非模態(tài)對話框 的概念來自于 GUI 程序，實際上這兩種對話框仍然是窗口的一種。
模態(tài)對話框在打開后會阻斷其父窗口接受鍵盤及鼠標消息，并且使父窗口是去焦點。只有當用戶關閉當前的模態(tài)對話框后，父窗口才可再次得到焦點以及恢復各種消息。典型的模態(tài)對話框有：打開/另存為對話框；
非模態(tài)對話框則不會阻斷其父窗口接受鍵盤及鼠標消息，其父窗口仍然可以獲得焦點。典型的非模態(tài)對話框有：查找/搜索對話框。

window.showModalDialog 方法不是 W3C 規(guī)范中的方法，其最初由 IE4 引入，用來創(chuàng)建一個模態(tài)對話框，并在其中顯示 HTML 頁面。其格式為：
vReturnValue? = object.showModalDialog(sURL [, vArguments] [, sFeatures])

三個參數(shù)分別為：對話框加載的 HTML 頁面的 URL、傳入對話框頁面的參數(shù)，控制對話框展現(xiàn)效果的參數(shù)。

其中可在對話框頁面中通過 document.arguments 獲得 vArguments 傳入的參數(shù)的內(nèi)容。

在 Firefox 3 中，也實現(xiàn)了對 window.showModalDialog 方法，其調(diào)用方式與IE類似，只是有個別參數(shù)沒有實現(xiàn)。

關于 showModalDialog 方法的詳細信息，請參考 MSDN 及 Mozilla Developer Center 中的內(nèi)容。

window.showModelessDialog 方法也不是 W3C 規(guī)范中的方法，其最初由 IE5 引入，用來創(chuàng)建一個非模態(tài)對話框，并在其中顯示 HTML頁面。其格式為：
vReturnValue? = object.showModelessDialog(sURL [, vArguments] [, sFeatures])

使用方法與 showModalDialog 類似。

關于 showModelessDialog 方法的詳細信息，請參考 MSDN 中的內(nèi)容。
問題描述

目前 Firefox 與 Safari 實現(xiàn)了與 IE 非常接近的 showModalDialog 方法，Chrome 中則是將其當做 window.open 方法處理，Opera 中暫時不支持此方法。
對于 showModelessDialog 方法，目前僅 IE 支持。
造成的影響

若在腳本代碼中使用了 showModalDialog 與 showModelessDialog 方法，則可能會導致運行效果不是預期效果，甚至可能導致代碼報錯。
受影響的瀏覽器Firefox Safari?? ?不支持 showModelessDialog 方法。
Chrome?? ?將 showModalDialog 方法當做 window.open 方法處理，不支持 showModelessDialog 方法。
Opera?? ?不支持 showModalDialog 與 showModelessDialog 方法。

問題分析

首先分析各瀏覽器對 showModalDialog 方法的支持情況。

分析以下代碼：

modaldialog.html
<input type= "text " id= "textbox " value= "defaultValue " /><br />
<button id= "open1 ">Open ModalDialog</button>
<script>
??? var updatetext =? " ";
??? function update() {
??????? document.getElementById( "textbox ").value = updatetext;
??? }

??? document.getElementById( "open1 ").onclick = function () {
??????? window.showModalDialog( "inner.html ", window);
??? }
</script>

inner.html
<input type= "text " id= "dialogtext " /><button id= "ok ">OK!</button>
<script>
??? document.getElementById( "dialogtext ").value =
????? window.dialogArguments.document.getElementById( "textbox ").value;
??? document.getElementById( "ok ").onclick = function () {
??????? window.dialogArguments.updatetext =
????????? document.getElementById( "dialogtext ").value;
??????? window.dialogArguments.update();
??????? window.close();
??? }
</script>

上面代碼中，modaldialog.html 使用 window.showModalDialog 方法創(chuàng)建模態(tài)對話框，載入 inner.html，并傳入 modaldialog.html 頁面的 window 對象。
?頁面 inner.html，打開后，文本框 INPUT[id= "dialogtext "] 的 value 初始值為頁面 modaldialog.html 中文本框 INPUT[id= "textbox "] 的 value 值，當改變 INPUT[id= "dialogtext "] 的 value 值并點擊 "OK " 按鈕后，模態(tài)對話框關閉，頁面 modaldialog.html 中文本框 INPUT[id= "textbox "] 的 value 值將變?yōu)槟B(tài)對話框內(nèi)文本框中的字符串。

這段代碼在不同的瀏覽器環(huán)境中的表現(xiàn)如下： ?? ?IE6 IE7 IE8 Firefox Safari?? ?Chrome?? ?Opera
window.showModalDialog 返回值 = function?? ?OK?? ?OK?? ?OK
彈出對話框?? ?OK?? ?OK?? ?FAIL
對話框為模態(tài)對話框?? ?OK?? ?FAIL?? ?FAIL
對話框與父窗口通過 arguments 的交互?? ?OK?? ?FAIL?? ?FAIL


可見，各瀏覽器的 window 對象中均包含 showModalDialog 方法，且均返回 function () { [native code] }。
在 IE Firefox Safari 中，對 showModalDialog 支持較好，彈出的窗口為模態(tài)對話框，父窗口失去焦點，且通過 arguments 參數(shù)，父窗口與模態(tài)對話框直接成功完成數(shù)據(jù)交互；
在 Chrome 中，雖然通過 showModalDialog 成功彈出了對話框，但此對話框并不是模態(tài)的，父窗口仍然可以獲得焦點，且數(shù)據(jù)交互失敗，很類似于 window.open 方法；
在 Opera 中，雖然 window.showModalDialog 返回為真，但彈不出對話框，也不能實現(xiàn)其功能。


下面分析各瀏覽器對 showModelessDialog 方法的支持情況。

modelessdialog.html
<input type="text" id="textbox" value="defaultValue" /><br />
<button id="open1">Open ModelessDialog</button>
<script>
??? var updatetext =? "";
??? function update() {
??????? document.getElementById("textbox").value = updatetext;
??? }
??? document.getElementById("open1").onclick = function () {
??????? window.showModelessDialog("inner.html", window);
??? }
</script>

inner.html
<input type="text" id="dialogtext" /><button id="ok" >OK!</button>
<script>
??? document.getElementById("dialogtext").value =
????? window.dialogArguments.document.getElementById( "textbox").value;
??? document.getElementById("ok").onclick = function () {
??????? window.dialogArguments.updatetext =
????????? document.getElementById("dialogtext").value;
??????? window.dialogArguments.update();
??????? window.close();
??? }
</script>

上面代碼和上一段的類似，只不過將 showModalDialog 方法換成了 showModelessDialog 方法。

這段代碼在不同的瀏覽器環(huán)境中的表現(xiàn)如下： ?? ?IE6 IE7 IE8?? ?Firefox Chrome Safari Opera
window.showModelessDialog 返回值 = function?? ?OK?? ?FAIL


showModelessDialog 方法目前僅被 IE 支持，在其他瀏覽器中 window.showModelessDialog 均返回 "undefined " 。
解決方案

showModalDialog 方法與 showModelessDialog 方法均不被 W3C 支持，雖然 showModalDialog 方法目前已比較廣泛的被支持，但還是應避免使用它。因為模態(tài)對話框會阻塞父窗口的輸入，使其是去焦點，這將對用戶體驗不利。
對于 showModalDialog 方法可以使用模擬模態(tài)對話框的方式，比如通過半透明 DIV 元素遮住頁面主體，在其之上顯示 "對話框 " 內(nèi)容。
對于 showModelessDialog 方法可以使用 window.open 代替。

?

轉載于:https://www.cnblogs.com/gavinw/archive/2013/03/29/2988172.html

總結

以上是生活随笔為你收集整理的转：模态对话框的支持 （IE,Firefox,Chrome）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。