嵌套Modal滚动时底层页面联动，根本原因是移动端touch事件穿透遮罩层，而非CSS错误；需精准拦截Modal内容区的touchmove事件并preventDefault，同时逐层设置高度约束和-webkit-overflow-scrolling: touch适配iOS。
为什么嵌套Modal一滚动，底层页面也跟着动
根本不是CSS写错了，而是移动端 touch 事件穿透了遮罩层。Bootstrap 的 .modal-backdrop 只挡点击，不拦截 touchmove，默认行为会把滑动手势“透传”给 body，导致底层页面滚动——尤其在 iOS Safari 和部分 Android WebView 中极明显。
常见现象：手指在 Modal 内向上/下滑动，Modal 自己没滚，但背景页面却在动；或者 Modal 滚了一半，底下内容突然接上滚动。
- 别只靠
overflow: hidden—— 它锁不住 touchmove 事件流 - 不要对
body直接加touch-action: none—— 这会让 Modal 内部所有触摸操作（比如轮播图、滑块）全部失效 - 正确做法是精准拦截：只在当前显示的 Modal 上绑定
touchmove并e.preventDefault()，且仅当事件发生在 Modal 内容区时才阻止
示例 JS（需在 Modal show 后执行）：
document.addEventListener('show.bs.modal', function (e) {
const modal = e.target;
const modalBody = modal.querySelector('.modal-body');
if (modalBody) {
modalBody.addEventListener('touchmove', function (e) {
// 只阻止内容区内的滑动，避免影响 header/footer 点击
if (e.target.closest('.modal-body')) {
e.preventDefault();
}
}, { passive: false });
}
});
modal-dialog-scrollable 在嵌套时为啥不生效
modal-dialog-scrollable 类本身只作用于单层 Modal 的 .modal-dialog，它设了 max-height 和 overflow-y: auto，但一旦嵌套，父 Modal 的 .modal-dialog 会变成 flex 容器，子 Modal 的高度被压缩或撑不开，导致子 Modal 的 max-height 计算失准，滚动直接失效。
立即学习“前端免费学习笔记（深入）”；
典型结构错误：.modal-dialog → .modal-content → （子 Modal 的整个 DOM 节点），而不是标准的 .modal-body → 子 Modal。
- 子 Modal 必须放在父 Modal 的
.modal-body内，不能直接塞进.modal-content - 父 Modal 的
.modal-body必须显式设max-height: 60vh（或calc(100vh - 200px)），否则子 Modal 没空间展开 - 子 Modal 自身也要加
modal-dialog-scrollable，且其.modal-body需再设max-height（比如40vh），形成层级高度约束 - 避免在父 Modal 中对
.modal-content设height: 100%或flex: 1—— 这会破坏 Bootstrap 原生弹性布局，让子 Modal 高度塌陷
多层 Modal 关闭后背景滚动恢复失败
Bootstrap 默认逻辑是“任意 Modal 关闭 → 移除 modal-open 类 → body 恢复滚动”，但在嵌套场景下，底层 Modal 关闭时，顶层 Modal 还开着，modal-open 却被删了，结果就是背景可滚，但 Modal 还罩着——用户完全卡住。
关键不是类名有没有，而是是否还有其他 Modal 处于 .show 状态。
- 监听
hidden.bs.modal事件时，用document.querySelectorAll('.modal.show').length > 0判断是否真该移除modal-open - 不要用
document.body.classList.contains('modal-open')做判断 —— 其他插件可能误加/漏删这个类 - 手动恢复滚动时，别只设
overflow: visible，要同步清除padding-right（Bootstrap 加的补偿值），否则页面会“向左跳” - 如果用了
data-bs-backdrop="static"，就完全绕过modal-open机制，此时必须自己管理overflow和padding
iOS Safari 中嵌套 Modal 滚动卡顿或闪退
不是性能差，是 WebKit 对嵌套 flex + overflow 的渲染限制。iOS Safari 在 .modal-body 里嵌了另一个 Modal 时，常出现滚动惯性丢失、突然截断、甚至整个 Modal 区域白屏——尤其当子 Modal 内含 iframe 或 Canvas 时。
- 必须给每一层 Modal 的
.modal-body加-webkit-overflow-scrolling: touch，缺一不可 - 避免用
vh单位设max-height—— iOS Safari 在地址栏收起/展开时会重算vh，导致高度突变、滚动条消失又弹出 - 改用
max-height: calc(100vh - 200px)，其中200px是实测的 header + footer + padding 总和（不是估算） - 如果子 Modal 内有第三方组件（如地图、富文本编辑器），它们可能主动调用
preventDefault()，干扰外层滚动，需检查其文档是否提供禁用滚动的配置项
嵌套 Modal 的滚动问题，本质是高度链断裂 + 事件流失控 + 渲染引擎限制三者叠加。每层都得单独管高度、单独拦 touch、单独适配 Safari，少一个环节就崩。
