如何使用 html dialog 元素？
<dialog> 是一个html5(精确来说是5.1)元素。它归类为“切片根”，类似 <body> ， <blockquote> ，和 <details> 元素 ,其中每个都会建立一个新的独立的内容区域，你可以把它作为 body 的一个孩子，或者是嵌套的元素，如 <div> 或 <section> ——两种元素都有效，如下所示。
<body>
<div>
<dialog></dialog>
</div>
<section>
<dialog></dialog>
</section>
<dialog></dialog>
</body>
默认情况下，支持的浏览器(Chrome 37+和Opera 27+)会以隐藏的形式呈现 <dialog> 元素，只有调用JavaScript的 show() 或 showModal() 方法才可以显现，调用 close() 方法再次将其隐藏。通常情况下，我们会在一个 click 事件上执行此方法，如下所示：
var $accountDelete = $('#delete-account'),
$accountDeleteDialog = $('#confirm-delete');
$accountDelete.on('click', function() {
$accountDeleteDialog[0].showModal();
});
$('#cancel').on('click', function() {
$accountDeleteDialog[0].close();
});show() 和 showModal() 方法(www.169it.com)
值得一提的是 show() 和 ShowModal() 方法的表现形式并不相同。show() 方法会按照其在DOM流中的位置显示元素。如果你在 body 结束标记之前添加它，它可能会出现在网页的底部。我们不得不添加自定义样式来调整其位置，例如，如果我们想将其在页面上居中。这时我们通常会使用 z-index 属性将其堆叠在其他元素上， position 属性设为 absolute ，当然还要设置其 left 和 top 属性的值。
另一方面， ShowModal() 方法，将以模态的形式显示元素。默认情况下，它会在页面的中心显示，并且它驻留在 顶部图层，如全屏API 以防止 z-index 属性，相对位置属性和父元素溢出的干扰。大多数情况下，我们会使用便利的 showModal() 方法来而不使用 show() 方法。
HTML<dialog>实例
使用 <dialog> 元素：
<table border="1">
<tr>
<th>January <dialog open>This is an open dialog window</dialog></th>
<th>February</th>
<th>March</th>
</tr>
<tr>
<td>31</td>
<td>28</td>
<td>31</td>
</tr>
</table>
浏览器支持
目前，只有 Chrome 和 Safari 6 支持 <dialog> 标签。
<dialog> 标签定义一个对话框、确认框或窗口。
HTML 4.01 与 HTML5之间的差异
<dialog> 标签是 HTML5 中的新标签。
属性
New ：HTML5 中的新属性。
| 属性 | 值 | 描述 |
|---|
| openNew | open | 规定 dialog 元素是有效的，用户可以与它进行交互。 |
<dialog> 标签支持 HTML 的全局属性。
事件属性
<dialog> 标签支持 HTML 的事件属性。
-
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术，将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外，均为转载,整理或搜集自网络.欢迎任何形式的转载，转载请注明出处.
转载请注明：文章转载自:[169IT-IT技术资讯]
本文标题:HTML <dialog> 标签
