JS中ShowModalDialog(模态窗口)详细使用

在JavaScript中，可以使用window.showModalDialog方法来创建一个模态窗口。模态窗口是指在打开的窗口上，用户不能与其他窗口进行交互，直到关闭模态窗口为止。

window.showModalDialog方法接受两个参数：URL和窗口参数。URL参数表示要加载的页面的URL地址，窗口参数是一个可选参数，用于指定窗口的属性，如大小、位置等。

以下是使用window.showModalDialog方法的详细步骤：

1. 创建一个新的HTML文件，命名为modal.html（或任何你想要的名称）。
2. 在modal.html中，添加一个按钮或其他触发事件的元素，例如：

   <button onclick="openModal()">打开模态窗口</button>
   

3. 在modal.html的<script>标签中，编写一个名为openModal的函数，用于打开模态窗口，例如：

   function openModal() {
     var url = 'https://www.example.com'; // 指定要加载的页面的URL
     var params = 'dialogWidth:400px;dialogHeight:300px'; // 可选的窗口参数
     window.showModalDialog(url, params);
   }
   

4. 保存并关闭modal.html文件。
5. 在另一个HTML文件中，添加一个链接或按钮，用于打开modal.html，例如：

   <button onclick="openModalWindow()">打开模态窗口</button>
   

6. 在该HTML文件的<script>标签中，编写一个名为openModalWindow的函数，用于打开modal.html，例如：

   function openModalWindow() {
     var url = 'modal.html'; // 指定要加载的模态窗口的HTML文件
     var params = 'dialogWidth:400px;dialogHeight:300px'; // 可选的窗口参数
     window.showModalDialog(url, params);
   }
   

7. 保存并运行该HTML文件，在点击链接或按钮时将打开一个模态窗口。

注意事项：

• window.showModalDialog方法在现代浏览器中已经不被支持，推荐使用window.open方法代替。
• 如果需要在模态窗口中返回值给父窗口，可以使用window.returnValue属性。
• 模态窗口的内容可以通过在modal.html中添加HTML代码来自定义。
• 可以通过在窗口参数中指定位置属性来控制模态窗口的位置，例如dialogLeft和dialogTop。