前端开发因新的 <dialog> 标签而迎来巨变……
❌以前：
看看制作一个对话框需要多少功夫 👇
光 CSS 就要写将近 20 行：
这还只是实现对话框功能的 CSS — 看起来还是相当简单：
但现在有了 <dialog> 标签！
✅ 现在：
我们甚至可以利用 show() 方法展示一个非模态对话框 – 不会那么突兀，也没有背景：
对话框一直是吸引用户注意力和直接展示信息的有力手段。
从 Material Design 到 Fluent Design，它一直是每个 UI 设计系统的标配特性。
然而，尽管它们很常见，我们总是需要依赖第三方库或创建自定义组件来使用它们。
许多这些库甚至不符合官方关于可用性和可访问性的推荐……
例如：按 Escape 键应该关闭页面上的对话框 — 但许多自定义对话框并不支持这一功能。
因此，<dialog> 标签改变了这一切。
自动打开的对话框
open 属性使得对话框在页面打开时自动保持开启状态：
自动关闭按钮
确实，你可以通过标准事件监听器和 <b>close()</b> 方法来实现关闭功能：
但是，内置的 <dialog> 标签让这变得更便捷 – 无需 JavaScript 即可完成：
如何正确地为< dialog >设置样式
<dialog> 标签带有一个特别的 ::backdrop 伪元素，专用于定制背景样式：
为主元素设置样式非常简单直接：
结语
新的 HTML <dialog> 标签让在网络应用中创建模态框和对话框变得比以往任何时候都更简单、更快捷。
猜你喜欢
