移动端模态框背景点击穿透的根源是.modal元素未显式设置pointer-events:none，导致touchstart事件冒泡至底层；正确解法是.modal{pointer-events:none}、.modal.show{pointer-events:auto}、.modal-dialog{pointer-events:auto}。
移动端点击模态框背景穿透的根源是 pointer-events 未显式阻断
不是遮罩没盖住，而是默认 pointer-events: auto 让 touchstart 冒泡到底层元素。iOS Safari 尤其明显：点空白处却触发了下方列表项的跳转，preventDefault() 和 stopPropagation() 都无效——因为事件根本没在遮罩层被捕获。
直接给 .modal-backdrop 设置 pointer-events: none 是错误操作
Bootstrap 的 .modal-backdrop 默认就是 pointer-events: none，它本就不响应点击，只负责视觉遮罩和滚动条补偿。你真正要控制的是「用户是否能点透到页面内容」，而这个行为由 .modal 容器的事件冒泡路径决定：
- 若
.modal自身没有显式设pointer-events: none，且子元素（如.modal-dialog）未占满全屏，则点击空白区域会命中.modal元素本身，再继续向下冒泡 - 移动端 WebView 对
pointer-events: none在overflow: scroll容器内响应有延迟，尤其配合transform或opacity创建的层叠上下文时更易失效 - 别用
visibility: hidden或opacity: 0隐藏遮罩后再显示——它们仍参与事件流，穿透照常发生
正确解法：用 CSS 确保 .modal 覆盖全屏并阻断事件
核心是让 .modal 元素自身成为「视觉存在但事件透明」的容器，同时保证其尺寸撑满视口、不被父级裁剪：
复制AI写代码
立即学习“前端免费学习笔记（深入）”；
.modal {
pointer-events: none;
}
.modal.show {
pointer-events: auto;
}
.modal-dialog {
pointer-events: auto;
}
这样设计后：
-
.modal在隐藏状态（无.show）下完全不响应任何事件，避免初始化阶段误触 - 显示时，只有
.modal-dialog及其后代可交互，其余区域（即背景蒙层）点击直接透传到底层 - 不依赖
.modal-backdrop，绕过 Bootstrap 的 JS 补偿逻辑，兼容data-bs-backdrop="false"场景 - 真机测试必须做：iOS Safari 15.4+ 支持
pointer-events: none对touchstart生效，但部分安卓 WebView 会卡在 transition 中间态，所以避免对pointer-events做动画切换
fixed 元素错位时需同步处理 body 滚动补偿
如果页面有 position: fixed 导航栏或悬浮按钮，Modal 打开后它们可能右移——这不是穿透问题，但常被混淆。这是因为 Bootstrap 默认给 body 加 modal-open 类并注入 padding-right，而 fixed 元素不响应该 padding：
- 最稳方案仍是加
data-bs-backdrop="static"，跳过整个补偿流程，不改body样式 - 若必须保留点击关闭，则为所有 fixed 元素加
.is-fixed类（如<nav class="navbar fixed-top is-fixed"></nav>），让 Bootstrap JS 自动同步padding-right - 手动覆盖
body.modal-open { padding-right: 0 !important; }不可靠——滚动条宽度是动态测得的，硬写死值在 macOS 或自定义滚动条下会错位
真正难的不是写几行 CSS，而是确认有没有第三方库（比如 perfect-scrollbar 或全局 reset.css）悄悄改了 body 的 overflow 或内联 padding-right——这些干扰往往藏在打包后的 vendor.js 里，得靠开发者工具逐层排查 computed 样式。
