JavaScript高级应用：模态与非模态对话框

"JavaScrip高级应用——操作模态与非模态对话框" 在JavaScript中，模态对话框（Modal Dialogs）和非模态对话框（Modeless Dialogs）是两种常见用于增强用户体验的交互方式。模态对话框会阻止用户与父窗口的交互，直到该对话框被关闭；而非模态对话框则允许用户在对话框与其他窗口之间自由切换。 1. **创建模态对话框** 创建模态对话框使用 `window.showModalDialog()` 方法。例如： ```javascript function fnOpenModal() { window.showModalDialog("callee.htm"); } ``` 这里的 `showModalDialog()` 方法接收至少一个参数：要打开的对话框的URL（在这个例子中是 "callee.htm"）。返回值 `vReturnValue` 可以用于获取对话框的结果或传递数据。 2. **创建非模态对话框** 非模态对话框则使用 `window.showModelessDialog()` 方法创建： ```javascript function fnOpenModeless() { window.showModelessDialog("callee.htm"); } ``` 和 `showModalDialog()` 类似，但用户可以继续与父窗口互动。 3. **方法参数** 两个方法都可以接受额外的参数来定制对话框的行为： - `sFeatures`: 这是一个可选字符串，包含逗号分隔的特性，如宽度、高度、位置等。例如，`"dialogWidth:400px;dialogHeight:300px"`。 - `vArguments`: 传递给对话框的参数，可以是任何JavaScript值，通常用于传递数据。 4. **对话框的外观和位置** 通过 `sFeatures` 参数，可以设置对话框的位置、大小、样式等。例如，可以指定对话框的初始位置居中： ```javascript "dialogLeft:0;dialogTop:0;center:yes;help:no;resizable:no;status:no;scroll:no" ``` 其中，`dialogLeft` 和 `dialogTop` 分别表示相对于屏幕的左边和上边的距离，`center` 参数使得对话框居中。 5. **数据传递** 在模态和非模态对话框中，可以使用 `window.returnValue` 属性来回传数据。在对话框内部，可以设置 `window.returnValue` 为任何值，然后在调用对话框的父窗口中访问这个属性来获取结果。 6. **对话框的生命周期** 当用户关闭模态对话框时，`showModalDialog()` 调用会立即返回，而关闭非模态对话框时，需要监听 `window.close` 事件。 7. **跨页面通信** 在caller和callee页面之间传递数据，除了 `vArguments` 参数外，还可以使用全局变量、URL查询参数或者利用 `localStorage` 或 `sessionStorage` 进行存储和读取。 8. **兼容性** `showModalDialog()` 和 `showModelessDialog()` 在某些现代浏览器中可能不被支持，因此在开发时需要考虑使用替代方案，如Bootstrap的模态插件或自定义JavaScript弹出框实现。 总结来说，JavaScript的模态和非模态对话框提供了与用户交互的便捷方式，可以根据应用需求选择合适的方法。需要注意的是，对于不支持这些方法的浏览器，应提供降级处理以确保兼容性和良好的用户体验。