JavaScript window.showModalDialog详解及示例

"window.showModalDialog和window.showModelessDialog是JavaScript中用于打开模态和非模态对话框的方法，主要应用于IE4+和IE5+浏览器。这两种方法可以创建一个独立于主页面的HTML窗口，提供与用户交互的功能。" 在JavaScript中，`window.showModalDialog()`方法用于打开一个模态对话框，这意味着用户必须先关闭该对话框才能继续与父窗口进行交互。而`window.showModelessDialog()`则打开一个非模态对话框，用户可以同时与对话框和父窗口进行交互。 这两个方法的调用格式如下： ```javascript var vReturnValue = window.showModalDialog(sURL[, vArguments][, sFeatures]); var vReturnValue = window.showModelessDialog(sURL[, vArguments][, sFeatures]); ``` 参数解释如下： - `sURL`：指定要打开的对话框的URL，可以是本地或远程的HTML文件。 - `vArguments`：可选参数，可以传递任何类型的数据给对话框，通常用来设置对话框的初始状态或提供数据。在对话框内部，可以通过`window.dialogArguments`获取这些传递的参数。 - `sFeatures`：可选参数，包含对话框的样式和行为特征，如高度、宽度、位置等。这些特性以分号分隔的键值对形式表示。 `sFeatures`中的常用特性包括： 1. `dialogHeight`：设置对话框的高度，单位默认为像素（px）。 2. `dialogWidth`：设置对话框的宽度。 3. `dialogLeft` 和 `dialogTop`：分别设置对话框相对于屏幕左上角的水平和垂直偏移量。 4. `center`：是否居中显示，默认为yes，表示自动居中。 5. `help`：是否显示帮助按钮，默认为yes。 6. `resizable`：是否允许用户调整对话框大小，默认为no。 7. `status`：是否显示状态栏，默认在模态对话框中为yes，在非模态对话框中为no。 8. `scroll`：是否显示滚动条，默认为yes。 9. `dialogHide`：在打开时是否隐藏父窗口，默认为no。 10. `edge`：对话框边框样式，可选'sunken'（下沉）或'raised'（凸起），默认为raised。 11. `unadorned`：是否去除对话框的系统装饰，如标题栏和边框，默认为no。 需要注意的是，`window.showModalDialog`返回值`vReturnValue`可以用来传递信息回调函数，而`window.showModelessDialog`通常不返回值，除非在对话框中自定义了返回值机制。此外，`showModalDialog`会阻塞父窗口的执行，直到对话框关闭，而`showModelessDialog`则不会。 在实际应用中，`showModalDialog`常用于需要用户输入信息或确认操作的情况，而`showModelessDialog`则适用于那些用户可以同时处理多个任务的场景。不过，由于这两个方法在现代浏览器中的支持度有限，尤其是在跨浏览器兼容性方面，因此在开发时应谨慎使用，并考虑使用更现代的替代方案，如Bootstrap的模态插件或者Web Components等。