dialog元素不显示是因为未调用showModal()；它默认不渲染、不占布局，仅设open属性或display无效，必须在DOM就绪后调用showModal()且确保其为body直接子级。
dialog 元素不显示？先确认是否调用了 showModal()
写了 <dialog> 标签但页面上啥也没有，不是 bug，是设计如此。<dialog> 默认不渲染、不占布局、不响应 CSS 的 display 或 visibility，它只认 JavaScript 方法。常见错误包括：
- 写
<dialog open>—— 这会让内容“可见”，但无遮罩、无焦点锁定、Esc 不生效、点击 backdrop 也不关闭 - 直接设
dialog.style.display = 'block'—— 完全无效，<dialog>不吃这套 - DOM 尚未就绪就调用
dialog.showModal()，报错Cannot read property 'showModal' of null
正确做法：只写 <dialog id="myDialog">，确保脚本在 DOMContentLoaded 后执行，或把 <script> 放在 </body> 前，再调用 document.getElementById('myDialog').showModal()。
showModal() 和 show() 别混用，模态场景必须用前者
show() 几乎没实际用途，它不加遮罩、不限制 Tab 键、不拦截背景交互，只适合悬浮提示类轻量场景；showModal() 才是模态弹窗的唯一正解：
- 自动插入
::backdrop并禁用背景交互 - 聚焦第一个可聚焦子元素（如
<button>） - 支持 Esc 关闭、点击 backdrop 关闭（需手动监听）
- 关闭后焦点自动返回触发元素
Firefox 目前（2026 年中）仍不渲染 ::backdrop 样式（仅逻辑阻塞），Chrome/Edge 111+、Safari 17.4+ 支持，但需手动补全样式，例如：dialog::backdrop { background: rgba(0,0,0,0.5); }。
立即学习“前端免费学习笔记（深入）”；
<dialog> 必须是 <body> 的直接子元素
嵌套在 <main>、<div class="container"> 或任何非 <body> 直系容器里，会导致 backdrop 渲染异常、定位错位、甚至 Safari 中完全不出现。这不是样式问题，而是浏览器渲染机制硬性要求：
- ✅ 正确：
<body><dialog id="dlg">...</dialog></body> - ❌ 风险：
<main><dialog>...</dialog></main>—— 即使 JS 调用成功，backdrop 也可能被父容器的overflow: hidden或transform截断 - 别给
<dialog>设pointer-events: none，这会让showModal()的焦点锁定彻底失效
点击遮罩关闭弹窗，但内部按钮也被误关？事件判断要精准
原生 <dialog> 的 backdrop 不是独立 DOM 节点，点击遮罩时 e.target 就是 dialog 元素本身；而点击弹窗内按钮时，e.target 是那个按钮。很多人写 dialog.onclick = () => dialog.close()，结果一点按钮就关窗。
安全写法只有一条：
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。不想点遮罩关闭？加 oncancel="event.preventDefault()" 即可阻止默认行为。
