HTML5 dialog元素生成模态弹出窗口

发布于静子

8 年前

近期,网页上的的许多流程都需要用户完全同意才可以完成。例如，用户可能需要删除帐户，更改他们的用户名，或确认货币交易。

这种情况下，常用的用户体验(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来模拟它。

扩展阅读

本文根据@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。