唯一可靠检测方式是'showModal' in HTMLDialogElement.prototype，返回true才代表可安全使用；否则必须降级为<div role="dialog">并手动实现焦点锁、遮罩和可访问性。
怎么判断浏览器是否支持原生 dialog 模态行为
不能只检查 document.createElement('dialog') 是否成功——旧版 Safari（如 15.3）能创建元素，但调用 showModal() 会直接抛出 TypeError: modal.showModal is not a function。唯一可靠检测方式是：'showModal' in HTMLDialogElement.prototype。返回 true 才代表可安全使用；否则必须降级。
为什么手动实现遮罩层时点一下就整个弹窗关闭了
根本原因是没做事件目标校验。监听遮罩层的 click 事件后，若不严格判断 e.target === overlayEl，事件冒泡会让弹窗内部任意可点击元素（按钮、输入框、链接）都触发关闭逻辑。
- 绝对不要用
overlay.contains(e.target)或e.target.classList.contains('overlay') - 遮罩层和弹窗必须是同级元素（都在
body下），且都用position: fixed，这个判断才真正有效 - 移动端请换用
pointerdown替代click，避免 iOS Safari 的 300ms 延迟导致误判或卡顿
遮罩层盖不住全屏？90% 是定位或尺寸写错了
用 position: absolute 是常见错误：它依赖最近的 position: relative 祖先，一旦祖先有 transform、overflow: hidden 或滚动，遮罩就会失联。正确做法是：
- 遮罩层和模态容器都必须用
position: fixed - 遮罩层尺寸写死：
top: 0; left: 0; right: 0; bottom: 0（等价于inset: 0），别依赖100vh——iOS Safari 滚动时地址栏收放会导致高度突变 - 如果遮罩只盖局部区域（比如某个卡片），父容器必须设
position: relative，遮罩层改用position: absolute
用 dialog 时为什么 backdrop 不生效或点击无效
dialog::backdrop 是伪元素，不是真实 DOM 节点，无法直接绑定事件，也不受常规 CSS 层叠规则完全约束。常见问题：
立即学习“前端免费学习笔记（深入）”；
- 部分安卓 WebView 不支持
dialog::backdrop，需备选方案（如外层加<div class="backdrop">） - 想点击 backdrop 关闭弹窗，不能靠监听
dialog元素的click，而应监听dialog::backdrop的 click（需现代浏览器支持），或降级为监听遮罩层 DOM 节点 -
dialog.open = true无效，必须用dialog.showModal()；关闭必须用dialog.close()，设open = false不会移除 backdrop，也不触发close事件
transform 或 opacity: 0.99 的父容器，会让子元素的 z-index 失效——遮罩层看似数字够大，却盖不住兄弟节点。这时候得提级到 body 底部，或者给那个“意外触发上下文”的父元素加 isolation: isolate。 
