模态框遮罩层未覆盖全屏的根本原因是 fixed 定位遮罩层缺少 top:0;left:0;width:100%;height:100% 或父容器存在 transform 等触发新层叠上下文的属性；iOS/安卓 WebView 中 vh 单位不稳定，应改用 100% 配合 html,body{height:100%} 或 min-height:100vh + -webkit-fill-available 兜底。
模态框遮罩层没盖住整个视口，滚动时内容露出来
根本原因是 position: fixed 的遮罩层（.modal-overlay）未设置 top: 0; left: 0; width: 100vw; height: 100vh;，或父容器有 transform/perspective 导致固定定位失效。iOS Safari 和部分安卓 WebView 对 vh 单位支持不稳定，建议改用 100% 配合 html, body { height: 100%; } 或直接用 min-height: 100vh + min-height: -webkit-fill-available 兜底。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
和加height: 100%，确保根高度可继承 - 遮罩层用
position: fixed; top: 0; left: 0; width: 100%; height: 100%;，别依赖vh单独撑高 - 避免在
或模态框祖先上设transform、filter、will-change—— 这些会创建新层叠上下文并“截断”fixed定位的参照系
点击模态框外部关闭时，触发了内部按钮的点击事件
这是事件冒泡导致的典型问题：点击遮罩层（ 实操建议： 立即学习“前端免费学习笔记（深入）”； 关键矛盾在于：既要让模态框内容可滚动，又要阻止背景页面滚动。单纯给 实操建议： 立即学习“前端免费学习笔记（深入）”； 实操建议： 立即学习“前端免费学习笔记（深入）”； 真正难的不是写出能弹出来的框，而是让它在各种设备、各种嵌套场景、各种用户操作路径下都稳住层级、不丢焦点、不滚穿底、不吞事件 —— 这些细节往往要靠真机反复点按和滑动才能暴露出来。.modal-overlay）时，如果点击位置恰好落在模态框内容区的透明区域（比如带 padding 的 click 绑在 document 上，没做 event.target 判断。
click，而不是 document —— 更精准、无歧义document，加判断：if (e.target === modalOverlay) { close(); }
pointer-events: auto（默认值），遮罩层保持 pointer-events: auto，不要给内容区设 pointer-events: none —— 否则内部交互全部失效模态框在移动端无法滚动，或滚动卡顿/穿透到底部页面
body 加 overflow: hidden 在 iOS 上常失效（尤其 Safari），且可能引发键盘弹出后页面错位。
body 的 overflow，改用 position: fixed; top: calc(-1 * var(--scroll-y)) 动态记录并重置滚动偏移（需 JS 配合 getBoundingClientRect() 或 scrollTop）max-height: 80vh; overflow-y: auto;，并加 -webkit-overflow-scrolling: touch 提升 iOS 滚动流畅度body 加 touch-action: none（仅限打开模态框期间），关闭时恢复用
标签实现模态框，但 showModal() 报错或样式异常 是 HTML5 原生模态元素，但兼容性仍有坑：Firefox 从 98+ 支持，Safari 15.4+ 才完整支持 showModal()，Chrome 虽支持但默认样式极简，且 open 属性为布尔属性，不能靠 CSS 控制显隐。
if ('showModal' in HTMLDialogElement.prototype)，不支持时降级为 div + 手动管理dialog.showModal() 触发，不能只加 open 属性 —— 否则无模态行为（无焦点捕获、无 ESC 关闭、无 backdrop）dialog::backdrop 伪元素，且必须写在 同级（不能嵌套），否则无效 不会自动阻止背景滚动，仍需配合 JS 锁定 body 滚动
