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弹出窗口对话框
