模态框遮罩层未覆盖全屏的根本原因是 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 兜底。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
<html>和<body>加height: 100%，确保根高度可继承 - 遮罩层用
position: fixed; top: 0; left: 0; width: 100%; height: 100%;，别依赖vh单独撑高 - 避免在
<body>或模态框祖先上设transform、filter、will-change—— 这些会创建新层叠上下文并“截断”fixed定位的参照系
点击模态框外部关闭时，触发了内部按钮的点击事件
这是事件冒泡导致的典型问题：点击遮罩层（.modal-overlay）时，如果点击位置恰好落在模态框内容区的透明区域（比如带 padding 的 <div class="modal">），事件会继续向上冒泡到遮罩层，但更常见的是误把 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（仅限打开模态框期间），关闭时恢复
用 <dialog> 标签实现模态框，但 showModal() 报错或样式异常
<dialog> 是 HTML5 原生模态元素，但兼容性仍有坑：Firefox 从 98+ 支持，Safari 15.4+ 才完整支持 showModal()，Chrome 虽支持但默认样式极简，且 open 属性为布尔属性，不能靠 CSS 控制显隐。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检测支持性：
if ('showModal' in HTMLDialogElement.prototype)，不支持时降级为 div + 手动管理 - 必须用
dialog.showModal()触发，不能只加open属性 —— 否则无模态行为（无焦点捕获、无 ESC 关闭、无 backdrop） - 自定义 backdrop 样式需用
dialog::backdrop伪元素，且必须写在<dialog>同级（不能嵌套），否则无效 - 注意：原生
<dialog>不会自动阻止背景滚动，仍需配合 JS 锁定body滚动
真正难的不是写出能弹出来的框，而是让它在各种设备、各种嵌套场景、各种用户操作路径下都稳住层级、不丢焦点、不滚穿底、不吞事件 —— 这些细节往往要靠真机反复点按和滑动才能暴露出来。
