HTML <dialog> 元素

HTML <dialog> 元素表示对话框或其他交互式组件，例如检查器或窗口。

在表格中显示一个对话窗口：

<table border="1">
  <tbody>
    <tr>
      <th>一月
        <dialog open>这是一个打开的对话窗口</dialog>
      </th>
      <th>二月</th>
      <th>三月</th>
    </tr>
    <tr>
      <td>31</td>
      <td>28</td>
      <td>31</td>
    </tr>
  </tbody>
</table>

尝试一下 »

特性

内容类别	流式内容，章节根节点。
允许的内容	流式内容
标签省略	不允许，开始标签和结束标签都不能省略。
允许的父元素	任何接受流式内容的元素。
允许的 ARIA 角色	alertdialog
DOM 接口	HTMLDialogElement

属性

该元素包含了全局属性。

tabindex 不能用在 <dialog> 元素上。

open

表示对话框处于活动状态并可用于交互。当未设置 open 属性时，对话框不会向用户显示。

事件属性

<dialog> 元素支持 HTML 的事件属性。

使用注意

• <form> 元素可以通过使用属性 method="dialog" 来集成到对话框中。当提交这样的表单时，对话框将被关闭，并将 returnValue 属性设置为所使用的提交按钮的 value。
• CSS 伪元素 ::backdrop 可以用在 <dialog> 元素后面的样式，例如，在模态对话框处于活动状态时，将不可访问的内容淡化。

实例

简单的实例

展示默认打开的对话框

<dialog open>
  <p>大家好！</p>
</dialog>

尝试一下 »

高级的实例

当单击 “更新详情” 按钮时，该示例打开包含表单的弹出对话框。

<dialog open id="fav-dialog">
  <form method="dialog">
    <section>
      <p><label for="fav-animal">喜欢的动物：</label>
      <select id="fav-animal">
        <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="update-details">更新详情</button>
</menu>

<script>
(function() {
  var updateButton = document.getElementById('update-details');
  var cancelButton = document.getElementById('cancel');
  var favDialog = document.getElementById('fav-dialog');

  // 点击按钮打开模态对话框
  updateButton.addEventListener('click', function() {
    favDialog.showModal();
  });

  // 点击表单取消按钮关闭对话框
  cancelButton.addEventListener('click', function() {
    favDialog.close();
  });
})();
</script>

尝试一下 »

规范

规范	状态	备注
HTML Living Standard <dialog> 的定义	现行的标准	-
HTML 5.1 的定义	推荐	初始定义

桌面浏览器兼容性

移动浏览器兼容性

1. 查看 Mozilla bug 840640。

Polyfills

加载这个 polyfill 可以在旧浏览器中支持对话框。

dialog-polyfill

相关链接

• close 事件
• cancel 事件