dialog 元素 - 模态窗口化繁为简
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
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/ 启用“启用实验性网络平台功能”。
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2013-09-22。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"没有我需要的信息"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"太复杂/步骤太多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"内容需要更新"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻译问题"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/代码问题"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"易于理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"解决了我的问题"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]