<dialog> 的 open 属性仅控制初始可见状态，不触发模态行为；真正可控的开关必须用 showModal() 和 close() 方法，show() 无遮罩、remove() 等操作会破坏模态逻辑。
dialog 的 open 属性只是初始开关，不是控制接口
写了 <dialog open> 页面一加载就显示，但这不是“可控”的打开方式。open 是布尔属性，只决定初始渲染状态，不触发模态行为（没遮罩、不锁焦点、Esc 不生效），也不能靠它反复开关——手动删掉 open 属性或设 dialog.open = false，对话框依然可见。
真正能控制显隐的只有 JS 方法：showModal()（推荐）、show()（非模态）、close()（唯一标准关闭）。open 属性仅适合静态预设可见状态，比如服务端渲染首屏提示，但生产环境极少这么用。
为什么直接写 open 属性后 dialog 还是不显示？
常见现象：HTML 里写了 <dialog open>内容</dialog>，刷新页面却什么都没看到。这不是 CSS 或 JS 错误，而是浏览器根本没把它当“可绘制元素”处理——<dialog> 默认 display: none，且不参与布局流，getBoundingClientRect() 都返回空值。
- 检查是否漏写了
open属性本身（不是open="true"或其他值，布尔属性有即真） - 确认没有被其他 CSS 强制设为
display: none或visibility: hidden - 排除父容器设置了
overflow: hidden且 dialog 溢出裁剪
showModal() 才是唯一可靠的“打开”动作
要用 JS 控制弹窗，必须调用 showModal()。它会自动激活模态层（dialog::backdrop）、禁用背景交互、聚焦第一个可聚焦子元素，并支持 Esc 关闭。而 show() 只是浮层，Tab 键仍能穿透到背景页，不符合警告类弹窗语义。
立即学习“前端免费学习笔记（深入）”；
正确写法示例：
const dialog = document.getElementById('myDialog');
const openBtn = document.getElementById('openBtn');
// ✅ 推荐：触发完整模态行为
openBtn.addEventListener('click', () => dialog.showModal());
// ❌ 不推荐：无遮罩、不锁焦点、Esc 失效
// openBtn.addEventListener('click', () => dialog.show());
注意：调用前必须确保 dialog 已挂载在 DOM 中，否则报 Cannot read property 'showModal' of null。把 <script> 放在 </body> 前，或监听 DOMContentLoaded 事件。
close() 是唯一安全的关闭方式，别碰 remove() 或 hidden
关闭必须用 close()，不能用 remove()、hidden = true 或 style.display = 'none'。前者会重置内部状态（焦点回退、释放模态栈），后续还能再次调用 showModal()；后三者破坏模态逻辑，导致下次打开失败、Esc 键无效、Tab 焦点混乱。
常见错误写法：
-
dialog.remove()→ 元素从 DOM 移除，再调showModal()报错 -
dialog.hidden = true→ 遮罩消失，背景可点击，键盘焦点不受控 -
dialog.style.display = 'none'→ 同上，且破坏dialog::backdrop渲染
正确做法是监听 close 事件统一清理：
dialog.addEventListener('close', () => {
console.log('用户关闭了，返回值：', dialog.returnValue);
// 表单重置、状态清空等操作放这里
});
点击遮罩关闭需手动监听（原生不支持）：在 click 事件中判断 e.target === dialog，但 Safari 15.4–16.3 有 e.target 总是 body 的 bug，得 fallback 到坐标判断。
