dialog 标签需调用 showModal() 才激活渲染，常见失效原因包括 DOM 未就绪、非 body 直接子级、父容器 CSS 干扰、误删 open 属性；点击 backdrop 不关闭需手动判断点击目标；表单提交需防刷新；样式、居中、焦点均需手写补全，且各浏览器兼容性差异极大。
dialog 标签写了却完全不显示？不是 CSS 没写对，是它压根没被激活——浏览器默认跳过渲染、不占布局、getBoundingClientRect() 返回空值。必须调用 showModal() 才真正启动模态行为。
为什么调用 showModal() 仍看不到弹窗
最常见原因不是代码错，而是 DOM 就绪时机或结构位置不对：
- 脚本执行早于
<dialog>解析：比如在<head>里直接写document.getElementById('dlg').showModal()，报Cannot read property 'showModal' of null -
<dialog>没放在<body>直接子级：嵌套在<main>、<div class="app">或任何容器里，Safari 和部分 Chrome 版本会丢掉::backdrop，甚至整个弹窗不可见 - 父容器有
transform、will-change或overflow: hidden：导致弹窗定位偏移、被裁剪，或 backdrop 渲染失败 - 手动删了
open属性：showModal()会自动加，但若后续执行dialog.removeAttribute('open')，弹窗就“消失”（DOM 还在，只是被浏览器判定为未激活）
点击遮罩层（::backdrop）不关闭的兼容写法
这不是 bug，是规范明确不支持自动关闭——::backdrop 是纯样式伪元素，不可点击、不冒泡、无法绑定事件。必须监听 dialog 自身的 click 并判断点击来源：
- 基础逻辑：
dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); }); - Safari 15.4–16.3 存在
e.target始终为body的 bug，需 fallback 到坐标判断：e.clientX < dialog.getBoundingClientRect().left || e.clientY < dialog.getBoundingClientRect().top - 绝对不要写
dialog.addEventListener('click', () => dialog.close())，这会让点按钮、输入框也关窗 - 别给
dialog设pointer-events: none，这会让showModal()的焦点锁定彻底失效
<form> 在 <dialog> 里提交后页面刷新
表单默认行为是整页 reload，看起来像弹窗“闪退”。解决路径分两种：
立即学习“前端免费学习笔记（深入）”；
- 简单场景：给
<form>加method="dialog"属性，提交后自动触发dialog.close()并设置dialog.returnValue（注意：按钮要带value属性，否则returnValue为空；Safari 目前始终返回空字符串，不能依赖传值） - 异步场景（如
fetch）：必须在submit事件中第一行调用e.preventDefault()，再执行请求逻辑，最后手动dialog.close() - 别把关闭逻辑写在按钮的
onclick里——用户按回车提交会漏掉 - 记得清空表单状态：关闭后手动重置
input.value、恢复按钮文字等，否则下次打开仍是脏数据
样式、居中、焦点都失效？这些全得手写补全
dialog 几乎没有跨浏览器一致的默认样式，且焦点管理非常脆弱：
- 居中依赖浏览器内置机制，但前提是
<dialog>是<body>直接子元素；嵌套即失效 -
dialog::backdrop在 Firefox 中不渲染（仅逻辑阻塞），Chrome/Edge 111+、Safari 17.4+ 支持，但需手动加样式：dialog::backdrop { background: rgba(0,0,0,0.5); } - 焦点只尝试聚焦第一个可聚焦子元素（
<button>、<input>），若首个是<h3>或tabindex="-1"的<div>，就会静默失败——务必确保首个子节点可聚焦，或在showModal()后手动.focus() - 关闭后焦点不会自动回到触发按钮，键盘用户会卡住，需手动调用
triggerBtn.focus()
真正麻烦的不是 API 多难记，而是每个浏览器对 dialog 的实现细节都咬得极死：Safari 对 e.target 的处理、Firefox 对 ::backdrop 的忽略、Chrome 对 transform 容器的截断……稍有偏差，模态行为就退化成普通浮层。
