BX9036: Opera 和 Chrome 对模态对话框（showModalDialog）的支持有缺陷，且非 IE 浏览器均不支持非模态对话框（showModelessDialog）


标准参考

模态对话框 和 非模态对话框 的概念来自于 GUI 程序，实际上这两种对话框仍然是窗口的一种。

  • 模态对话框在打开后会阻断其父窗口接受键盘及鼠标消息，并且使父窗口是去焦点。只有当用户关闭当前的模态对话框后，父窗口才可再次得到焦点以及恢复各种消息。典型的模态对话框有：打开/另存为对话框；
  • 非模态对话框则不会阻断其父窗口接受键盘及鼠标消息，其父窗口仍然可以获得焦点。典型的非模态对话框有：查找/搜索对话框。

window.showModalDialog 方法不是 W3C 规范中的方法，其最初由 IE4 引入，用来创建一个模态对话框，并在其中显示 HTML 页面。其格式为：



vReturnValue  = object.showModalDialog(sURL [, vArguments] [, sFeatures])



三个参数分别为：对话框加载的 HTML 页面的 URL、传入对话框页面的参数，控制对话框展现效果的参数。

其中可在对话框页面中通过 document.arguments 获得 vArguments 传入的参数的内容。

在 Firefox 3 中，也实现了对 window.showModalDialog 方法，其调用方式与IE类似，只是有个别参数没有实现。

关于 showModalDialog 方法的详细信息，请参考 MSDN 及 Mozilla Developer Center 中的内容。

window.showModelessDialog 方法也不是 W3C 规范中的方法，其最初由 IE5 引入，用来创建一个非模态对话框，并在其中显示 HTML页面。其格式为：


vReturnValue  = object.showModelessDialog(sURL [, vArguments] [, sFeatures])


使用方法与 showModalDialog 类似。

关于 showModelessDialog 方法的详细信息，请参考 MSDN 中的内容。

问题描述

目前 Firefox 与 Safari 实现了与 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 方法创建模态对话框，载入 inner.html，并传入 modaldialog.html 页面的 window 对象。
页面 inner.html，打开后，文本框 INPUT[id= "dialogtext "] 的 value 初始值为页面 modaldialog.html 中文本框 INPUT[id= "textbox "] 的 value 值，当改变 INPUT[id= "dialogtext "] 的 value 值并点击 "OK " 按钮后，模态对话框关闭，页面 modaldialog.html 中文本框 INPUT[id= "textbox "] 的 value 值将变为模态对话框内文本框中的字符串。

这段代码在不同的浏览器环境中的表现如下：

 

IE6 IE7 IE8 Firefox Safari

Chrome

Opera

window.showModalDialog 返回值 = function

OK

OK

OK

弹出对话框

OK

OK

FAIL

对话框为模态对话框

OK

FAIL

FAIL

对话框与父窗口通过 arguments 的交互

OK

FAIL

FAIL

可见，各浏览器的 window 对象中均包含 showModalDialog 方法，且均返回 function () { [native code] }。

  • 在 IE Firefox Safari 中，对 showModalDialog 支持较好，弹出的窗口为模态对话框，父窗口失去焦点，且通过 arguments 参数，父窗口与模态对话框直接成功完成数据交互；
  • 在 Chrome 中，虽然通过 showModalDialog 成功弹出了对话框，但此对话框并不是模态的，父窗口仍然可以获得焦点，且数据交互失败，很类似于 window.open 方法；
  • 在 Opera 中，虽然 window.showModalDialog 返回为真，但弹不出对话框，也不能实现其功能。


下面分析各浏览器对 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 方法。

这段代码在不同的浏览器环境中的表现如下：

 

IE6 IE7 IE8

Firefox Chrome Safari Opera

window.showModelessDialog 返回值 = function

OK

FAIL

showModelessDialog 方法目前仅被 IE 支持，在其他浏览器中 window.showModelessDialog 均返回 "undefined " 。

解决方案

showModalDialog 方法与 showModelessDialog 方法均不被 W3C 支持，虽然 showModalDialog 方法目前已比较广泛的被支持，但还是应避免使用它。因为模态对话框会阻塞父窗口的输入，使其是去焦点，这将对用户体验不利。

  • 对于 showModalDialog 方法可以使用模拟模态对话框的方式，比如通过半透明 DIV 元素遮住页面主体，在其之上显示 "对话框 " 内容。
  • 对于 showModelessDialog 方法可以使用 window.open 代替。

参见

知识库

相关问题

测试环境

操作系统版本:

Windows 7 Ultimate build 7600

浏览器版本:

IE6

IE7

IE8

Firefox 3.6

Chrome 5.0.356.2 dev

Safari 4.0.4

Opera 10.50

测试页面:

modaldialog.htmlmodelessdialog.html

本文更新时间:

2010-07-10

关键字

dialog 对话框 modal modeless 模态 window 窗口