要实现真正全屏遮罩，必须手写一个 fixed 定位、四边归零的独立 div 层，而非修改 .modal-backdrop；若仅需调暗默认遮罩，则覆盖其 background-color 为 rgba() 并加 !important 或使用 CSS 变量。

全屏遮罩不是改 .modal-backdrop 就能实现的

直接调低 .modal-backdrop 的 opacity 或 background 透明度，只会让默认那个灰色半透层变淡，但它的尺寸仍是固定高度、不占满视口——它本来就不是全屏的。Bootstrap 的 .modal-backdrop 是一个独立 DOM 节点，定位为 position: fixed，但默认没设 top/right/bottom/left 四边归零，也没强制 width/height，所以实际覆盖区域取决于 JS 渲染逻辑和父容器上下文，尤其在嵌套路由或 modal 嵌套时极易错位、裁剪。

想真正“全屏”，必须脱离 .modal-backdrop 的默认行为，另起一层。

要全屏，得手写一个 fixed 遮罩层，而不是改 .modal-backdrop

最简可靠的方式是加一个独立

，用 CSS 锚定视口四边：

• position: fixed（不能用 absolute，否则滚动就失效）
• top: 0; right: 0; bottom: 0; left: 0（比 width: 100vw; height: 100vh 更稳，避免移动端地址栏缩放导致的 vh 失准）
• z-index: 1060（必须高于 Bootstrap 默认 .modal 的 z-index: 1055，否则会被 modal 内容穿透）
• 背景用 background-color: rgba(0, 0, 0, 0.4)，别用 opacity，防止子元素也变透明

示例 HTML 结构：

<div id="full-screen-backdrop" class="d-none"></div>

CSS：

#full-screen-backdrop {<br>  position: fixed;<br>  top: 0; right: 0; bottom: 0; left: 0;<br>  z-index: 1060;<br>  background-color: rgba(0, 0, 0, 0.4);<br>}

如果只是想调暗默认遮罩层，改 .modal-backdrop 的 background 才有效

这时候你不需要全屏，只是希望原生 backdrop 更浅或更重。直接覆盖其 background 即可，但要注意三点：

• 必须用 rgba()，不能只写 rgb() 或十六进制 —— 否则 alpha 不生效
• 加 !important，因为 Bootstrap 5+ 用内联样式或高权重要素控制 backdrop
• 确认 modal 触发时确实生成了 .modal-backdrop 元素 —— 如果用了 data-bs-backdrop="false"，这层根本不会存在

推荐写法（放在自定义 CSS 文件末尾）：

VPS Bootstrap

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

下载

.modal-backdrop {<br>  background-color: rgba(0, 0, 0, 0.2) !important;<br>}

或者用 Bootstrap 5 的 CSS 变量方式（更干净）：

:root {<br>  --bs-backdrop-bg: rgba(0, 0, 0, 0.2);<br>}

容易被忽略的 body 滚动条偏移问题

Modal 弹出时，Bootstrap 会自动给 body 加 modal-open 类，并设 overflow: hidden。这会导致右侧滚动条消失，页面内容向右“跳”约 17px —— 很多人误以为是遮罩层变暗引起的抖动，其实是布局重排。

修复它必须同步处理：

body.modal-open {<br>  overflow-y: auto !important;<br>  padding-right: 0 !important;<br>}

这段 CSS 必须和 backdrop 样式一起加载，否则即使遮罩看起来正常，页面也会闪一下。别指望只靠 JS 移除 class 来规避 —— Modal 的 show/hide 生命周期里，这个 class 是自动管理的，手动删容易引发状态不同步。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！