哈喽，大家好，我是程序员黎明。最近发现了一个改变前端开发游戏规则的标签——HTML 的
<dialog>标签。有了它，前端开发的方式就完全不同了。
之前的做法：有点麻烦
以前，要做个对话框
光是写 CSS 就得写十几二十行，还只是基本功能，想要复杂点还得用库或者自定义组件。即便如此，很多自定义的对话框还不能遵循可用性规范，比如按下 Esc 键关闭对话框这种事，很多库都做不到。
现在的 <dialog>：简单多了
现在有了 <dialog> 标签，一切都变得简单了。
你甚至可以用 show() 方法来显示一个非模态对话框，也就是没有背景遮挡的那种，干扰性更小。
比如说，之前各种 UI 设计系统里，像 Material Design 或 Fluent Design，都把对话框当作一个非常重要的元素
但我们不得不用外部库或者写一堆代码来实现。而现在，直接用 <dialog>，既方便又简洁。
自动打开对话框
你可以用 open 属性让对话框一打开页面就显示出来，简单高效。
自动关闭按钮
虽然你可以用标准的事件监听器和 close() 方法来关闭对话框
但其实 <dialog> 内置了关闭功能，不用再写 JavaScript，直接上就行。
如何给 <dialog> 设置样式
别忘了，<dialog> 还有一个叫 ::backdrop 的伪元素，专门用来给背景设置样式。
主要的元素样式设置也很简单，没有什么特别难的。
最后
总的来说，有了 <dialog>，再做模态框或者对话框简直是分分钟的事，不仅省代码，还能提升可访问性，真是前端开发的一大利器。好的，本期我们就到这里啦，感谢观看！我们下期再见！