HTMLDialogElement - 提供了操作 <dialog> 元素的方法

HTMLDialogElement 接口提供了操作 <dialog> 元素的方法。它继承了 HTMLElement 接口的属性和方法。

属性

从其父接口 HTMLElement 继承了属性。

HTMLDialogElement.open

一个 Boolean，表示 open HTML 属性，指示对话框是否可用于交互。

HTMLDialogElement.returnValue

一个 DOMString，用于设置或返回对话框的返回值。

方法

从其父接口 HTMLElement 继承了方法。

HTMLDialogElement.close()

关闭对话框。可以传入一个 DOMString 可以作为参数，从而更新对话框的 returnValue。

HTMLDialogElement.show()

无模式显示对话框，即仍然允许与对话框外部的内容进行交互。

HTMLDialogElement.showModal()

在可能出现的任何其他对话框的上方，以对话框形式显示对话框。对话框外的交互将被阻止。

事件

close

对话框关闭时触发。也可以通过 onclose 属性处理。

实例

以下实例显示了一个简单的按钮，单击该按钮可通过 HTMLDialogElement.showModal() 函数打开一个包含表单的 <dialog>。在这里，您可以单击 取消 按钮以关闭对话框（通过 HTMLDialogElement.close() 函数），或通过 提交 按钮提交表单。

  <!-- 简单弹出对话框，包含一个表单 -->
  <dialog id="favDialog">
    <form method="dialog">
      <section>
        <p><label for="favAnimal">最喜欢的动物：</label>
        <select id="favAnimal" name="favAnimal">
          <option></option>
          <option>盐水虾</option>
          <option>小熊猫</option>
          <option>蜘蛛猴</option>
        </select></p>
      </section>
      <menu>
        <button id="cancel" type="reset">取消</button>
        <button type="submit">提交</button>
      </menu>
    </form>
  </dialog>

  <menu>
    <button id="updateDetails">更新详情</button>
  </menu>

  <script>
    (function() {
      var updateButton = document.getElementById('updateDetails');
      var cancelButton = document.getElementById('cancel');
      var dialog = document.getElementById('favDialog');
      dialog.returnValue = 'favAnimal';

      function openCheck(dialog) {
        if(dialog.open) {
          console.log('打开对话框');
        } else {
          console.log('关闭对话框');
        }
      }

      // 点击按钮将打开一个模式对话框
      updateButton.addEventListener('click', function() {
        dialog.showModal();
        openCheck(dialog);
      });

      // 点击表单取消按钮关闭对话框
      cancelButton.addEventListener('click', function() {
        dialog.close('animalNotChosen');
        openCheck(dialog);
      });

    })();
  </script>

尝试一下 »

注意：您可以在 GitHub 上查看该实例 htmldialogelement-basic（查看在线演示）。

规范

规范	状态	备注
HTML Living Standard HTMLDialogElement 的定义	现行的标准
HTML 5.2 的定义	推荐	初始定义

桌面浏览器兼容性

移动浏览器兼容性

1. 请参阅 bug 840640。

相关链接

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