用示例探索 HTML ＜dialog＞元素

不念不忘少年蓝@ 2023-09-28 09:19 15阅读 0赞

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

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

> ![9ca743820b2ae4823fbdd62f19783b89.png][]
> 
> *图 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.enabled`about: config 设置中的标志来支持。即使有标志，背景 CSS 样式也不起作用。
 *  `Safari`： 没有支持。

[您可以从这里][Link 1]了解其他平台。

> 此功能值得比现在更广泛的支持。但好消息是，这个特性是 Polyfillable 的。你可以从这里安装[polyfill][]。

## **`<dialog>`API \_** ##

有一些 API 可用于显示和隐藏对话框。

dialog.show(); // to show the dialog
    dialog.close(); // to close the dialog

对话框出现了基本的用户代理提供的样式，如自动边距、粗边框样式等，可以使用 CSS 轻松自定义。

> ![c38cc9cb221e6ee649978fcb77011d66.png][]
> 
> *图 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>`元素规范提到解决可[访问性问题][Link 2]。

## **缺点** ##

在对话框外部单击以将其关闭的功能尚不可用。也许将来会添加。到目前为止，您必须实施它。

## **那么，它准备好使用了吗？** ##

除了`shortcoming`上面提到的，该`dialog`组件看起来完全可以与 polyfill 一起使用。由于它在 HTML 中原生可用，因此您不需要任何额外的库支持来实现模态对话框。

[9ca743820b2ae4823fbdd62f19783b89.png]: https://img-blog.csdnimg.cn/img_convert/9ca743820b2ae4823fbdd62f19783b89.png
[Link 1]: https://caniuse.com/?search=dialog
[polyfill]: https://github.com/GoogleChrome/dialog-polyfill
[c38cc9cb221e6ee649978fcb77011d66.png]: https://img-blog.csdnimg.cn/img_convert/c38cc9cb221e6ee649978fcb77011d66.png
[Link 2]: https://html.spec.whatwg.org/multipage/dom.html#concept-element-accessibility-considerations