javascript showModalDialog详解：实现模态对话框的三种方式

本文主要介绍了如何在JavaScript中使用`showModalDialog`方法创建和操作模态对话框。这是一种在网页中显示一个全屏、遮罩背景的对话框，以便于用户集中注意力进行特定操作。`showModalDialog`函数通常用于旧版本的Internet Explorer浏览器，因为它不被现代浏览器如Firefox所支持。 标准的`showModalDialog`调用方式如下： ```javascript function openWin(src, width, height, showScroll) { window.showModalDialog( src, "", // 对话框的名称或ID "location:No;status:No;help:No;dialogWidth:" + width + ";dialogHeight:" + height + ";scroll:" + showScroll + ""; ); } ``` 在这个函数中，你需要提供对话框的URL（src），以及自定义的窗口尺寸（width 和 height）以及是否允许滚动条（showScroll）。然后通过点击事件来调用这个函数，例如 `<span onclick="openWin('//www.jb51.net', '500px', '400px', 'no')">点击</span>`。 然而，对于Firefox浏览器，推荐使用`window.open`方法，其语法为： ```javascript window.open('openwin.html', 'newWin', 'modal=yes,width=200,height=200,resizable=no,scrollbars=no'); ``` 这里，`modal=yes`参数表示打开的是一个模态对话框。 为了提供更好的兼容性，你可以编写一段代码来检测浏览器类型并相应地选择合适的打开方式。例如，使用`document.all`来判断是否为IE： ```javascript function showDialog(url) { if (document.all) { // 如果是IE feature = "dialogWidth:300px;dialogHeight:200px;status:no;help:no"; window.showModalDialog(url, null, feature); } else { // 非IE浏览器（如Firefox） feature = "width=300,height=200,menubar=no,toolbar=no,location=no,"; feature += "scrollbars=no,status=no,modal=yes"; window.open(url, null, feature); } } ``` 这段代码会在IE上使用`showModalDialog`，而在非IE浏览器上使用`window.open`的兼容模式。 `showModalDialog`是过去在某些特定环境下的常用技术，但在现代开发中，随着HTML5和浏览器对新API的支持，建议使用更现代的`window.open`或者更高级的对话框API来替代，以提高兼容性和用户体验。