<dialog>: 对话框标签
最后更新：2026-10-13
<dialog>对话框标签
表示一个对话框或弹窗，可通过 JavaScript 的 showModal()/show() 打开。
| 分类 | 语义化 |
|---|---|
| 内容模型 | 流式内容 |
| 允许的父元素 | 接受流式内容的元素 |
| 闭合标签 | 需要 </dialog> 标签 |
| 状态 | 标准 |
📝 语法
<dialog>对话框内容</dialog>▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <dialog> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| 所有主流浏览器均支持 | |||||
提示： 用 showModal() 打开会触发浏览器原生模态（带遮罩、Esc 关闭）；加 open 属性可默认显示非模态。
❓ 常见问题
Qdialog 和普通 div 弹层有什么区别？
A
<dialog> 是原生模态对话框元素：用 showModal() 打开时自带顶层渲染（盖住一切）、焦点圈定和 Esc 关闭，无需手写 z-index 与焦点陷阱。div 弹层的这些能力全要自己实现。Qdialog 的 showModal 和 show 有什么区别？
A
showModal() 打开模态对话框：有遮罩、阻塞页面其余交互、支持 Esc 关闭；show() 打开非模态对话框：无遮罩，用户仍可与页面其他部分交互。两者都用 close() 关闭。Qdialog 可以用 CSS 自定义样式吗？
A可以。遮罩通过
::backdrop 伪元素设置，对话框本体正常用 CSS 排版。注意 display 默认由 open 状态控制，自定义时不要覆盖掉 dialog[open] 的显示逻辑。🏷️ 相关标签
💡 相关案例
更多案例即将上线，敬请期待。
📚 相关教程
