HTML参考手册
标签 | Elements
dialog
HTML<dialog>
元素表示一个对话框或其他交互式组件,例如一个检查员或窗口。
内容类别 |
流量内容,切片根 |
---|---|
允许的内容 |
流量内容 |
标记遗漏 |
没有,起始和结束标签都是强制性的。 |
允许父母 |
任何接受流内容的元素 |
允许ARIA角色 |
alertdialog |
DOM界面 |
HTMLDialogElement |
属性
这个元素包含全局属性。该tabindex
属性不能在<dialog>
元素上使用。
open
表示该对话框处于活动状态并可用于交互。当open属性没有设置时,不应该向用户显示。
使用说明
-
<form>
通过用属性指定元素,可以将元素集成到对话框中method="dialog"
。当提交这样的表单时,对话框被关闭,其returnValue
属性被设置为所value
使用的提交按钮。
-
::backdrop
CSS伪元素使用在<dialog>
元素之后,例如, 在模式对话框处于活动状态时使无法访问的内容变暗。
示例
简单的例子
<dialog open>
<p>Greetings, one and all!</p>
</dialog>
高级示例
当单击“更新详细信息”按钮时,此示例打开一个包含一个表单的弹出对话框。
HTML
<!-- Simple pop-up dialog box, containing a form -->
<dialog open id="favDialog">
<form method="dialog">
<section>
<p><label for="favAnimal">Favorite animal:</label>
<select id="favAnimal">
<option></option>
<option>Brine shrimp</option>
<option>Red panda</option>
<option>Spider monkey</option>
</select></p>
</section>
<menu>
<button id="cancel" type="reset">Cancel</button>
<button type="submit">Confirm</button>
</menu>
</form>
</dialog>
<menu>
<button id="updateDetails">Update details</button>
</menu>
JavaScript
(function() {
var updateButton = document.getElementById('updateDetails');
var cancelButton = document.getElementById('cancel');
var favDialog = document.getElementById('favDialog');
// Update button opens a modal dialog
updateButton.addEventListener('click', function() {
favDialog.showModal();
});
// Form cancel button closes the dialog box
cancelButton.addEventListener('click', function() {
favDialog.close();
});
})();
运行结果
规范
规范 |
状态 |
评论 |
---|---|---|
HTML Living Standard该规范中'<dialog>'的定义。 |
生活水平 |
|
HTML 5.1该规范中'<dialog>'的定义。 |
建议 |
初始定义 |
浏览器兼容性
Feature |
Chrome |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari |
---|---|---|---|---|---|
Basic support |
37 |
No support1 |
No support |
24 |
No support |
Feature |
Android |
Firefox Mobile (Gecko) |
IE Mobile |
Opera Mobile |
Safari Mobile |
---|---|---|---|---|---|
Basic support |
37 |
No support |
No support |
No support |
No support |
标签 | Elements相关
超文本标记语言,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果。