近期,网页上的的许多流程都需要用户完全同意才可以完成。例如，用户可能需要删除帐户，更改他们的用户名，或确认货币交易。
这种情况下，常用的用户体验(UX,User experience design)是显示一个具有两个按钮的对话框。一个是取消，一个是继续。这么多年，我们一直依靠JavaScript库实现此效果，但在本教程中，我们要用<dialog>元素实现此效果。
使用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()方法
值得一提的是show()和ShowModal()方法的表现形式并不相同。
show()方法会按照其在DOM流中的位置显示元素。如果你在body结束标记之前添加它，它可能会出现在网页的底部。我们不得不添加自定义样式来调整其位置，例如，如果我们想将其在页面上居中。这时我们通常会使用z-index属性将其堆叠在其他元素上，position属性设为absolute，当然还要设置其left和top属性的值。
另一方面，ShowModal()方法，将以模态的形式显示元素。默认情况下，它会在页面的中心显示，并且它驻留在顶部图层，如全屏API以防止z-index属性，相对位置属性和父元素溢出的干扰。
大多数情况下，我们会使用便利的showModal()方法来而不使用show()方法。
自定义样式
像大多数其他的元素一样，对话框可以很容易覆盖浏览器的默认样式。所以，你可以自定义其样式。例如，使对话框边框更薄，使边角圆润，并添加阴影效果等。
此外，当<dialog>元素以模态显示时(使用ShowModal()方法)，我们会添加一个额外的伪元素::backdrop。::backdrop元素会立即驻留在对话框下面，覆盖整个视区和下方的其它元素。
低透明度，深红色点击按钮的背景是常见的样式，如下代码：
添加过渡样式
自定义对话框的样式应该简单直观，但如何添加CSS过渡样式呢？我们怎样才可以使用尺度效应，逐渐显露出对话框呢？
第一步
首先，我们指定过渡，将对话框的规模缩小90%，并让它在视线中消失。
dialog {
visibility: hidden;
transform: scale(0.1);
transition: transform 200ms;
}
第二步
现在我们定义一个类选择器，将对话框扩展到其预期的大小，使之可见。
dialog.dialog-scale {
visibility: visible;
transform: scale(1);
}
第三步
现在我们的小诀窍是，在我们添加dialog-scale类之前，我们将对话框“保持”几毫秒的小规模状态。为了实现这一目标，我们使用JavaScript的setTimeout()方法来添加此类：
var transition;
$accountDelete.on('click', function() {
$accountDeleteDialog[0].showModal();
transition = setTimeout(function() {
$accountDeleteDialog.addClass('dialog-scale');
}, 0.5);
});
第四步
当我们关闭对话框的时候，不要忘记删除这个类并清除超时，代码如下。
$('#cancel').on('click', function() {
$accountDeleteDialog[0].close();
$accountDeleteDialog.removeClass('dialog-scale');
clearTimeout(transition);
});
总结
虽然现在浏览器对<dialog>的支持还很弱，但它是非常方便的。如果当所有主流浏览器都支持了它，我们将大大减少对库的依赖，我们的内容结构也将更加语义化，更加接近辅助技术，并且我们将会拥有模态对话框生成的标准。
那时，你就可以在不支持的浏览器中使用谷歌浏览器的polyfill来模拟它。
扩展阅读
- HTML5 Dialog Element Specification
- Modal and Modeless Boxes in Web Design
- What You May Not Know About the Z-Index Property
本文根据@Thoriq Firdaus的《Native Popups and Modals With the HTML5 “dialog” Element》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://webdesign.tutsplus.com/tutorials/native-popups-and-modals-with-the-html5-dialog-element--cms-23876。
如需转载，烦请注明出处：http://www.w3cplus.com/html5/native-popups-and-modals-with-the-html5-dialog-element.html