showmodal()是让dialog出现在页面最顶层并阻断交互的唯一有效方式；只写标签、加open属性或调用show()均无法实现真正模态遮罩与焦点锁定，因其不锁背景、不响应esc、点击遮罩也不关闭。
showModal() 是让 dialog 出现在页面最顶层并阻断交互的唯一有效方式；只写标签、加 open 属性或调用 show() 都无法实现真正的模态遮罩与焦点锁定。
为什么 showModal() 调用后弹窗还是不显示？
不是语法错，而是 DOM 状态或环境干扰导致“假失效”：
- 脚本执行早于
dialog元素挂载 —— 必须等DOMContentLoaded后再查元素，否则document.querySelector('dialog')返回null -
dialog嵌套在transform、will-change或overflow: hidden的父容器里 —— Safari 和部分 Chrome 版本会直接裁剪或错位渲染，甚至 backdrop 完全不可见 - 手动调用了
dialog.removeAttribute('open')——showModal()会自动加open，但删了它又不重调，DOM 就卡在“非激活”状态 - 多个
dialog共存时，后打开的没覆盖前一个 —— 浏览器不自动管理 z-index 栈，需显式设置dialog { z-index: 2147483647; }（别用 999 或 9999）
如何确保点击遮罩层能关闭弹窗？
原生 dialog 的 ::backdrop 是伪元素，**不触发任何默认关闭行为**，且事件冒泡在 Safari 中极不可靠：
- Chrome/Edge 120+ 可用：
dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); }) - Safari 15.4–17.6 必须降级：用坐标判断是否点在弹窗外，例如
e.clientX - 绝对不要写
dialog::backdrop { pointer-events: auto; }并试图监听 —— 它无法绑定事件，CSS 层面不可编程 - 如果用了
show()，压根没有 backdrop，此逻辑完全无效
关闭后焦点和返回值怎么处理才不翻车？
close() 只做一件事：移除 open 属性并触发 close 事件。其余都得手动补：
- 关闭后焦点不会自动回到触发按钮 —— 必须显式调用
triggerBtn.focus()，否则键盘用户卡死 -
dialog.returnValue在 Chrome/Firefox/Edge 中可用（如dialog.close('confirmed')），但 Safari（v17.6 及之前）始终返回空字符串，不能用于传值 - 按 Esc 关闭会触发
close事件，但你不监听就收不到 —— 得写dialog.addEventListener('close', handler) - 反复调用
showModal()不会导致内存泄漏，但如果每次动态创建新dialog节点却不移除，DOM 会持续堆积
真正难的不是写出 dialog.showModal() 这一行，而是 Safari 的 backdrop 渲染异常、returnValue 不一致、以及焦点管理缺失 —— 这些问题不报错，但上线后 iOS 用户和键盘用户的体验会直接崩掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
