dialog 元素 - 模态窗口化繁为简

Eiji Kitamura

Chrome Canary 已支持在标记后面使用 dialog 元素。dialog 元素可用于网页中的弹出式窗口。

  • show()：打开对话框。
  • close()：关闭对话框。接受一个可选参数，如果存在，则将该参数设置为 dialog.returnValue。
  • showModal()：打开模态对话框。
  • ::backdrop：用于设置模态对话框后面的背景样式的伪元素。
  • close 事件：在对话框关闭时触发。

更新日期：2013 年 12 月 16 日

dialog 元素现在支持：

  • cancel 事件：在模态对话框中按 Esc 键时触发。可以使用 event.preventDefault() 取消此活动。
  • autofocus 属性：当对话框显示时，具有 autofocus 属性（如果有）的模态对话框中的第一个表单控件将获得焦点。如果没有此类元素，则系统会聚焦第一个可聚焦元素。
  • form[method="dialog"]：仅在对话框内有效。在用户提交表单时，该方法会关闭对话框，并将 dialog.returnValue 设置为所用的提交按钮的值。

通过实时演示和 polyfill 查看详情。

若要开启此功能，请在 chrome://flags/ 中启用“启用实验性 Web 平台功能”。