Bootstrap如何让Modal模态框弹出时背景页面不滚动（禁止溢出）-Bootstrap教程-PHP中文网

Bootstrap 依赖 body 上的 modal-open 类控制背景滚动，若该类缺失、被覆盖或遇多层 Modal 干扰，会导致滚动失控、关闭后不恢复或页面“向左抽”。

bootstrap 默认就禁用背景滚动——但如果你发现背景还能滚、关了还卡住、或者页面“向左抽一下”，说明 modal-open 类没被正确管理，或被 css 覆盖，或多层 modal 干扰了状态同步。

Bootstrap 5 完全依赖 body 上的 modal-open 类来控制滚动：它会同时设 overflow: hidden 和补偿 padding-right。如果这个类根本没出现，滚动就完全失控。

别手动调用 document.body.classList.add('modal-open')——必须由 Bootstrap 的 JS 实例触发，比如用 bootstrap.Modal.getInstance(modalEl).show()
检查是否用了自定义初始化方式：比如直接 modalEl.classList.add('show') + modalEl.style.display = 'block'，这种绕过 JS 控制流的做法会让 modal-open 完全缺失
确认没在其他地方（比如全局 CSS 或第三方插件）写了 body { overflow: visible !important }，这会直接覆盖 modal-open 的样式

Bootstrap 默认逻辑是“任意一个 modal 关闭 → 移除 modal-open → body 恢复滚动”。但在嵌套场景下，上层 modal 还开着，底层 modal 关闭就会误删 modal-open，导致背景意外可滚。

监听 hidden.bs.modal 事件时，先检查是否还有其他 modal 在显示：if (document.querySelectorAll('.modal.show').length > 0) { /* 不删 modal-open */ }
避免在关闭逻辑里写 $('body').removeClass('modal-open') —— jQuery 可能因异步或 DOM 状态不同步漏操作
别依赖 document.body.classList.contains('modal-open') 做判断，因为类名可能被其他插件污染；改用 document.querySelectorAll('.modal.show').length > 0

模态框打开瞬间横向偏移，根本不是滚动问题，而是 Bootstrap 主动给 body 加了 padding-right: 17px 补偿滚动条消失。fixed 元素（如导航栏）没同步右移，就显得“被吸向左”。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

data-bs-backdrop="static" 是最干净的解法：它跳过整个滚动条补偿逻辑（不加 modal-open、不设 padding-right、不改 overflow），同时保留 ESC 键关闭能力
适用场景：权限确认、提示弹窗、单次操作反馈等「不需要点背景关闭」的 modal
若必须支持点击遮罩关闭，就手动接管：modalEl.addEventListener('show.bs.modal', () => document.body.style.overflow = 'hidden')，但**不添加 modal-open 类**，也**不设 padding-right**

禁掉背景滚动后，很多人发现模态框自己也不滚了。这不是 overflow 没生效，而是 .modal-dialog-scrollable 依赖父容器（通常是 .modal-body）有明确的高度上限，否则 overflow-y: auto 不会触发。

.modal-body 没设 max-height，或设的是 height: 100%（父容器没高度，百分比无效）
移动端用 60vh 在 iOS Safari 上失效（视口缩放 bug），建议改用 max-height: calc(100vh - 200px)，减去 header/footer 实际像素高度
内容是异步加载的，max-height 设得太小，导致滚动条出现前内容就被截断

真正麻烦的从来不是“怎么禁滚动”，而是“怎么让禁和恢复严格匹配当前可见 modal 的数量”，以及“怎么绕过 Bootstrap 那套估算 padding-right 的抖动逻辑”。这两个点一旦松动，所有后续表现都会不可预测。