如何在Bootstrap中实现全屏遮罩层_通过CSS定位z-index与100vh高度

作者：袖梨 2026-06-25

全屏遮罩层在 Bootstrap 中无法靠 class 自动实现，必须手动写 CSS；因 .modal 非全屏、z-index 易被覆盖、display 依赖 JS 控制，且 .modal-backdrop 为独立节点，故需用 position:fixed+100vh+足够 z-index 手动构建。

全屏遮罩层在 Bootstrap 中无法靠 class 自动实现，必须手动写 CSS —— 因为 .modal 默认不占满视口，.position-fixed 缺少高度控制，而 100vh 和 z-index 需要协同生效才能真正“压住全部内容”。

为什么 `.modal` 不是全屏遮罩层

Bootstrap 的 .modal 是带内边距、固定宽高、居中弹出的对话框，它的 height 由内容撑开，不是 100vh；且默认 z-index 是 1055（v5.3），虽高但若页面有自定义 z-index 的元素（比如顶部导航栏设了 z-index: 1100），遮罩就会失效。

.modal 的 display 是 none，需用 JS 触发 show，不能纯 CSS 控制显隐
它依赖 .modal-dialog 包裹，这个容器默认 max-width: 500px，会限制宽度
即使加 h-100 到 .modal，也无法突破父容器（.modal-backdrop 是独立兄弟节点）的定位逻辑

手写全屏遮罩层：关键三步

最简可靠的方式是脱离 .modal，用一个独立 <div> 手动控制：

用 position: fixed 脱离文档流，四边归零：top: 0; right: 0; bottom: 0; left: 0
高度必须用 100vh（不是 100%），否则在嵌套容器里会失效；宽度同理用 100vw
z-index 至少设为 1060（高于 Bootstrap 默认 .modal 的 1055），避免被覆盖

.fullscreen-overlay {  position: fixed;  top: 0;  right: 0;  bottom: 0;  left: 0;  width: 100vw;  height: 100vh;  background-color: rgba(0, 0, 0, 0.7);  z-index: 1060;  display: none;}.fullscreen-overlay.show {  display: block;}

与 Bootstrap 组件共存时的常见坑

遮罩层常配合下拉菜单、侧边栏或自定义弹窗使用，容易因层级或尺寸错乱导致点击穿透或显示不全：

立即学习“前端免费学习笔记（深入）”；

100vh 在 iOS Safari 中可能包含地址栏高度，导致底部留白 —— 可改用 100dvh（支持 Chrome 105+/Safari 16.4+），降级方案用 JS 动态设 style.height = window.innerHeight + 'px'
若遮罩层内放 .dropdown，需确保其 z-index 高于遮罩（如设 z-index: 1070），否则下拉项会被裁切
用 transform: translateZ(0) 或 will-change: transform 可能意外创建新层叠上下文，使内部元素 z-index 失效，慎加
不要给遮罩层加 overflow: hidden，否则内部滚动内容（如长列表）会不可见

用 JS 控制显隐比纯 CSS 更可控

虽然可用 :target 或 checkbox hack 实现纯 CSS 显隐，但在实际项目中几乎都会搭配按钮交互和状态管理，JS 更直接：

用 classList.toggle('show') 控制 .fullscreen-overlay 的显示
监听 Esc 键关闭：document.addEventListener('keydown', e => e.key === 'Escape' && overlay.classList.remove('show'))
点击遮罩层本身关闭时，注意事件委托 —— 直接绑 click 到遮罩层上，别绑到内部子元素再冒泡，避免误关
如果遮罩层里要放表单，记得加 tabindex="-1" 并用 focus() 把焦点锁进遮罩，提升可访问性