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

Eiji Kitamura

Chrome Canary 已支持标志后面的对话框元素。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 平台功能”。