全屏遮罩层在 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> 手动控制：
<ul>
<li>用 <code>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()把焦点锁进遮罩，提升可访问性
真正难的不是写那几行 CSS，而是判断什么时候该用 100dvh、什么时候要手动同步 z-index 值、以及是否需要拦截 pointer-events 来透传点击 —— 这些都得看具体场景里其他组件的定位策略和层叠上下文。
