dialog广泛称为模态对话框，是网页上的弹出框。当一个对话框用覆盖物遮住页面内容的其余部分时，它也被称为模态对话框。模态对话框的目的是当它显示时，用户不应该能够与页面内容的其余部分进行交互。

这是一个示例模式对话框的示例。对话框的较暗背景称为backdrop cover.

HTML5point对话失败 对话框html_前端

图 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 轻松自定义。

HTML5point对话失败 对话框html_前端_02

图 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 中原生可用，因此您不需要任何额外的库支持来实现模态对话框。