qt弹出窗口对话框
如今,网络上的许多流程都需要获得用户的完全同意才能完成。 例如,用户可能需要删除帐户,更改用户名或确认货币交易。
在这种情况下,一种常见的UX方法是显示一个对话框,通常带有两个按钮。 一个用于取消,另一个用于继续操作。 多年来, 我们一直依靠JavaScript库来执行此操作,但是在本教程中,我们将使用实验性的<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>
元素,仅在使用show()
或showModal()
并通过JavaScript请求时使其可见,并使用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流中的位置显示元素。 如果您在正文结束标记之前添加了它,则它可能会出现在网页底部。 例如,如果我们想将其放置在页面的中心,就必须添加自定义样式来调整其位置。 这些样式通常会使用z-index
将元素堆叠在其他元素的顶部, position
属性设置为absolute
,以及left
和top
。
另一方面, showModal()
方法会将元素显示为模态。 默认情况下,它将显示在页面的中央,并且位于顶层,就像fullScreen API一样,它可以防止z-index
,相对位置和父元素的溢出而产生干扰。
在大多数情况下,很可能我们会使用showModal()
的便利性来代替show()
方法。
自定义样式
该对话框包含浏览器的默认样式,可以像大多数其他元素一样轻松覆盖这些样式。 例如,您可以使对话框的边框更细,使角变圆并添加阴影。
另外,当<dialog>
元素显示为模式(使用showModal()
方法)时,我们可以使用其他伪元素::backdrop
。 ::backdrop
元素位于对话框的紧下方,覆盖了整个视口以及下面的其他元素。
通常使用低不透明的深色来设置背景样式–单击红色按钮以查看实际效果:
通过过渡添加天赋
自定义对话框样式应该很简单,但是如何添加CSS过渡呢? 我们如何使用缩放效果逐渐显示对话框,或多或少如何使用OS X?
第1步
首先,我们将对话框缩小90%,指定过渡,然后将其隐藏。
dialog {
visibility: hidden;
transform: scale(0.1);
transition: transform 200ms;
}
第2步
现在,我们定义一个类选择器,该选择器会将对话框缩放到其预期的大小并使其可见。
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);
});
第4步
让我们不要忘记删除此类并在关闭对话框时清除timeOut。
$('#cancel').on('click', function() {
$accountDeleteDialog[0].close();
$accountDeleteDialog.removeClass('dialog-scale');
clearTimeout(transition);
});
我们都准备好了! 您可以在以下演示中试用它:
结语
<dialog>
非常方便,尽管在浏览器支持方面仍然很差。 如果所有主流浏览器都实现了它,那么我们将减少对库的依赖,我们的内容结构将更加语义化,辅助技术可以正常访问,并且我们将有一种标准的方式来传递模式对话框。
在此之前,您可以使用Google Chrome浏览器中的polyfill在不支持的浏览器中对其进行仿真。
更多资源
qt弹出窗口对话框