dialog标签不显示是因为未调用showModal()或show()；它默认隐藏、不渲染、不占布局，必须在DOM就绪后调用且确保为body直接子级。
dialog 标签不显示？检查是否调用了 showModal() 或 show()
HTML <dialog> 是原生模态框，但它默认是隐藏的，不会像 <div> 那样渲染在页面上。必须通过 JavaScript 显式调用方法才能显示——showModal()（带 backdrop、强制聚焦、阻塞交互）或 show()（无 backdrop、不阻塞）。常见错误是只写了 HTML 结构却没调 JS 方法，结果页面完全看不到它。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
<dialog>必须放在<body>直接子级（或至少不在<div>等非块级容器里），否则部分浏览器（如旧版 Safari）可能无法正确定位 backdrop - 首次显示前，推荐用
showModal()，它会自动添加半透明遮罩并禁用背景滚动；show()更适合轻量浮层，但需手动处理焦点和 ESC 关闭 - 调用前确保元素已挂载到 DOM：如果
<dialog>在 JS 执行时尚未解析，document.getElementById(...)会返回null
点击按钮打开 dialog：绑定 click 事件时注意 this 指向和元素获取方式
按钮触发 dialog 最常用方式是给按钮加 onclick 或用 addEventListener。容易出错的是事件处理器里找不到目标 <dialog> 元素，尤其当按钮和 dialog 不在同一个作用域（比如模板字符串生成、动态插入）时。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用
data-target属性关联按钮与 dialog：<button data-target="my-dialog">打开</button>+<dialog id="my-dialog"></dialog>，JS 中用document.getElementById(btn.dataset.target) - 避免在内联
onclick里写长逻辑，例如：onclick="document.getElementById('my-dialog').showModal()"看似简单，但一旦 dialog ID 改了就失效，且无法统一管理关闭逻辑 - 如果按钮在 shadow DOM 内，需用
getRootNode()获取 dialog，不能直接document.getElementById
关闭 dialog 的三种可靠方式：ESC、点击 backdrop、显式调用 close()
showModal() 打开的 dialog 默认支持 ESC 键关闭，也响应点击 backdrop（灰色遮罩）关闭——但前提是 backdrop 没被 CSS 覆盖（比如 pointer-events: none 或 z-index 错乱）。而 close() 必须由 JS 主动调用，常用于“确认”“取消”按钮。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 关闭按钮应放在 dialog 内部，并绑定
click事件调用dialog.close()；不要只靠display: none隐藏，那会绕过 dialog 生命周期，导致 backdrop 残留、焦点异常 - 监听
close事件可清理状态：dialog.addEventListener('close', () => console.log('用户关闭了', dialog.returnValue))，returnValue是close("confirmed")传入的值 - 若需阻止 ESC 关闭，目前没有标准 API；只能临时监听
keydown并event.preventDefault()，但不推荐——违背无障碍原则
样式兼容性坑：Safari 15.4+ 才支持 <dialog>，且默认无 padding/margin
Firefox 和 Chrome 较早支持，但 Safari 直到 15.4（2022 年 3 月）才正式启用。更麻烦的是，所有浏览器对 <dialog> 的默认样式都极简：无 padding、无 border、无 background、居中逻辑依赖 position: absolute，容易和现有布局冲突。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须加基础样式，否则内容紧贴边缘：
dialog { padding: 1em; border: 1px solid #ccc; border-radius: 4px; } - Safari 早期版本（@supports not (display: dialog) { ... } 回退到
div+ 手动实现 modal 逻辑 - backdrop 样式要用
::backdrop伪元素：dialog::backdrop { background: rgba(0,0,0,0.5); }，别试图用兄弟元素模拟，它不参与普通 CSS 层叠
真正麻烦的不是怎么写，而是 dialog 的 focus 管理和键盘导航行为——比如按 Tab 键时焦点是否只在 dialog 内循环、关闭后焦点是否回到触发按钮。这些细节不处理，对屏幕阅读器用户就是障碍。
