HTML | DOM 对话框 showModal() 方法(1)

📌 相关文章

📜 HTML | DOM 对话框 showModal() 方法(1)

📅 最后修改于: 2023-12-03 15:15:36.269000 🧑 作者: Mango

HTML | DOM 对话框 showModal() 方法

介绍

在 JavaScript 中，modal dialogs（模态对话框）可以通过调用 showModal() 方法来呈现。 showModal() 方法创建一个模态对话框，并使其变为当前活动窗口。

模态对话框是指当一个对话框弹出后，除了对话框上的操作，其它页面元素都将失去响应性。对话框一般用于向用户提供信息或让用户做出决定。

showModal() 方法是 HTML DOM 中的一个方法。它可以在网站开发中非常有用，尤其是需要显示模态对话框来收集信息或显示提示信息的情况下。

语法

dialogElement.showModal();

其中，dialogElement 表示一个对话框元素，比如使用 dialog 元素定义的对话框。

返回值

showModal() 不返回任何值。

示例

以下是使用 showModal() 方法创建并呈现一个对话框的示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Modal Dialog Demo</title>
</head>
<body>

  <!-- 定义一个对话框 -->
  <dialog id="myDialog">
    <p>Hello, this is a modal dialog!</p>
  </dialog>

  <button onclick="showDialog()">Show Dialog</button>

  <script>
    function showDialog() {
      var dialog = document.querySelector('#myDialog');
      dialog.showModal();
    }
  </script>

</body>
</html>

在上述示例中，我们定义了一个对话框元素，并使用 onclick 事件触发 showDialog() 函数。该函数获取对话框元素并调用 showModal() 方法来呈现对话框。

兼容性

目前，showModal() 方法仅被 Chrome 和 Opera 浏览器支持。其他浏览器的支持情况可以在 Can I use 中查看。

在不支持 showModal() 方法的浏览器中，可以使用模拟模态对话框的技术来实现类似效果。