HTMLDialogElement：open 属性

基线 2022

新功能

自 2022 年 3 月起，此功能在最新的设备和浏览器版本中均可使用。此功能可能不适用于较旧的设备或浏览器。

open 是 HTMLDialogElement 接口的一个布尔值属性，它反映了 open HTML 属性，指示 <dialog> 是否可供交互。

值

一个布尔值，表示 open HTML 属性的状态。true 表示已设置，因此对话框显示。false 表示未设置，因此对话框不显示。

该属性不是只读的——可以通过编程方式设置其值以显示或隐藏对话框。

示例

以下示例显示了一个简单的按钮，当点击时，通过 showModal() 方法打开一个包含表单的 <dialog>。在那里，您可以点击“取消”按钮关闭对话框（通过 HTMLDialogElement.close() 方法），或通过提交按钮提交表单。

html

<!-- Simple pop-up dialog box -->
<dialog id="dialog">
  <form method="dialog">
    <button type="submit">Close</button>
  </form>
</dialog>

<p>
  <button id="openDialog">Open Dialog</button>
</p>
<p id="dialogStatus"></p>

<script>
  (() => {
    const openDialog = document.getElementById("openDialog");
    const dialog = document.getElementById("dialog");
    const text = document.getElementById("dialogStatus");

    function openCheck(dialog) {
      if (dialog.open) {
        text.innerText = "Dialog open";
      } else {
        text.innerText = "Dialog closed";
      }
    }

    // Update button opens a modal dialog
    openDialog.addEventListener("click", () => {
      dialog.showModal();
      openCheck(dialog);
    });

    dialog.addEventListener("close", () => {
      openCheck(dialog);
    });
  })();
</script>

结果

规范

规范
HTML 标准 # dom-dialog-open

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。

另请参阅

实现此接口的 HTML 元素：<dialog>。