HTML 5.2<dialog>为本机模态对话框引入了一个新元素。乍一看，它看起来相当简单（而且确实如此），但是当我一直在玩它时，我发现它有一些很容易错过的好功能。

在本文末尾提供了一个完整的工作演示，

这是基本对话框的标记：

该open属性表示该对话框可见。没有它，对话框将被隐藏，直到您使用JavaScript来显示它。在添加任何样式之前，对话框呈现如下：

它绝对位于页面上，因此它会像您期望的那样出现在其他内容的前面，并且水平居中。默认情况下，它与内容中的内容一样宽。

基本操作

JavaScript有一些方法和属性可以轻松地使用<dialog>元素。你可能最需要的两种方法是showModal()和close()。

当您使用showModal()打开对话框时，会向页面添加背景，阻止用户与模态外部的内容进行交互。默认情况下，此背景是完全透明的，但您可以使用CSS显示它（更多信息如下）。

按Esc将关闭对话框，您可以提供关闭按钮来触发该close()方法。

还有第三种方法，show()也可以使模态出现，但没有伴随的背景。用户仍然可以与对话框外可见的元素进行交互。

浏览器支持和Polyfill

目前，<dialog>Chrome只支持行为。Firefox提供默认样式，但JavaScript API仅在标志后面启用。我怀疑Firefox很快会默认启用它。

值得庆幸的是，有既提供JavaScript行为，又提供具有默认样式的样式表。dialog-polyfill在npm中安装以使用它 - 或使用常规旧<script>标签。它适用于IE9及以上版本。

使用polyfill时，页面上的每个对话框都需要初始化：

这不会取代拥有它的浏览器的本机行为。

对话框样式

打开和关闭模态很不错，但最初它看起来不太专业。添加样式就像设置任何其他元素一样简单。可以使用新的::backdrop伪元素设置背景样式。

对于使用polyfill的旧浏览器，此伪元素选择器将不起作用。在其位置，polyfill会.backdrop在对话框后立即添加元素。您可以使用CSS来定位它：

添加一点标记以提供样式挂钩。对话框的常用方法是将其分解为标题，正文和页脚：

为此添加一些CSS，您可以根据需要制作模态外观：

更多控制

通常，我们希望从对话框中获得某种用户反馈。关闭对话框时，可以将字符串值传递给close()方法。此值分配给returnValue对话框DOM元素的属性，因此可以在以后读取：

还有一些你可以听的活动。两个有用的是close（当模态关闭cancel时触发）和（当用户按下Esc以关闭模态时触发）。

似乎缺少的一件事是在单击背景时关闭模态的能力，但有一种解决方法。单击背景会触发具有<dialog>事件目标的单击事件。如果构造模态以使子元素填充对话框的整个空间，那么这些子元素将成为对话框内任何单击的目标。这样，您可以侦听对话框上的单击，并在对话框本身是click事件的目标时关闭它：

这并不完美，但它确实有效。如果您找到更好的方法来检测背景上的点击次数，请与我们联系。

完整的工作演示

下面是演示地址：http://www.ikinsoft.com/demo/dialog/dialog.html