dialog广泛称为模态对话框，是网页上的弹出框。当一个对话框用覆盖物遮住页面内容的其余部分时，它也被称为模态对话框。模态对话框的目的是当它显示时，用户不应该能够与页面内容的其余部分进行交互。
这是一个示例模式对话框的示例。对话框的较暗背景称为backdrop cover.
图 1：带有背景封面的示例模式对话框
在本文中，我们将探索<dialog>HTML 中的元素并查看它的用法。我们还将了解一些缺点，最后验证它是否可以在您的应用程序中使用。
HTML 原生<dialog>元素
HTML<dialog>元素代表一个对话框，它有一个特殊的属性，
open：表示对话框处于活动状态并且可以与之交互。如果未设置 open 属性，则不应向用户显示对话框。
<dialog>
User can not see me.
</dialog>
<dialog open>
I'm open and visible!
</dialog>
在写这篇文章的时候，它已经得到了浏览器的支持，
Chrome: 从版本 37+Edge: 从版本 79+Firefox：在 Firefox 中通过启用dom.dialog_element.enabledabout: config 设置中的标志来支持。即使有标志，背景 CSS 样式也不起作用。Safari： 没有支持。
您可以从这里了解其他平台。
此功能值得比现在更广泛的支持。但好消息是，这个特性是 Polyfillable 的。你可以从这里安装polyfill。
<dialog>API _
有一些 API 可用于显示和隐藏对话框。
dialog.show(); // to show the dialog
dialog.close(); // to close the dialog
对话框出现了基本的用户代理提供的样式，如自动边距、粗边框样式等，可以使用 CSS 轻松自定义。
图 2：在 Chrome 浏览器上显示基本 UA 样式
这是一个 CodePen 显示基本对话框元素的显示隐藏。
使用dialog.showModal()代替dialog.show()
关于构建自定义对话框的期望之一是如何获得背景封面，这样用户就无法与应用程序的其余部分进行交互。当您从 JavaScript 中使用该方法时，该方法dialog.showModal()免费提供给您。
默认情况下，背景封面为低不透明度黑色。::backdrop您可以使用伪元素控制它的外观。检查此 CodePen 以了解其工作原理，
从<form>元素关闭对话框。
如果<form>元素具有属性method="dialog"，则元素可以关闭对话框。在这种情况下，我们不需要显式的dialog.close()JavaScript API 调用。
<dialog id="dialog">
<p>I'm a dialog. Close me using the button below.</p>
<form method="dialog">
<button>Close</button>
</form>
</dialog>
Escape(ESC) 键关闭
默认情况下，使用转义键关闭对话框的功能与<dialog>元素一起提供。这是一个额外的好处，因为您不必实施它。
网页无障碍
模态实际上是最难实现 Web 可访问性的。<dialog>元素规范提到解决可访问性问题。
缺点
在对话框外部单击以将其关闭的功能尚不可用。也许将来会添加。到目前为止，您必须实施它。
那么，它准备好使用了吗？
除了shortcoming上面提到的，该dialog组件看起来完全可以与 polyfill 一起使用。由于它在 HTML 中原生可用，因此您不需要任何额外的库支持来实现模态对话框。