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

发布于 静子

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

这种情况下,常用的用户体验(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,当然还要设置其lefttop属性的值。

另一方面,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

静子

在校学生,本科计算机专业。一个积极进取、爱笑的女生,热爱前端,喜欢与人交流分享。想要通过自己的努力做到心中的那个自己。微博:@静-如秋叶

如需转载,烦请注明出处:https://www.fedev.cn/html5/native-popups-and-modals-with-the-html5-dialog-element.htmljordans for sale edition