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/ 启用“启用实验性网络平台功能”。