如何使用HTML5 dialog标签构建弹窗组件？

本文共计977个文字，预计阅读时间需要4分钟。

HTML5 是一种用于构建网页和网站的标准语言，它定义了网页内容的结构、样式和行为。与之前版本相比，HTML5 引入了许多新特性和功能，以提升网页性能、互动性和多媒体支持。

dialog 元素的基本打开/关闭流程

原生 <dialog> 没有自动绑定按钮或点击遮罩关闭的行为，所有交互都得靠 JS 控制。它的核心就两个方法：show() 和 showModal()；关闭统一用 close()。

• show()：显示非模态对话框（不锁背景、不聚焦、可被 tab 穿透）——基本没人用
• showModal()：真正意义上的弹窗，会加灰层、禁用背景交互、自动聚焦第一个可聚焦子元素
• close() 必须显式调用，哪怕用户按了 Esc —— 它只触发 close 事件，不自动隐藏
• 关闭后 open 属性变为 false，但 DOM 仍在，需自行清理或复用

为什么点击遮罩层不关闭 dialog？

因为规范没定义这个行为。点击 <dialog> 外部区域（即 backdrop）默认什么也不做，连事件都不冒泡到 dialog 本身。要实现“点遮罩关闭”，得监听 click 事件并判断是否点在 backdrop 上。