Bootstrap全屏遮罩层怎么实现

• 用 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 来透传点击 —— 这些都得看具体场景里其他组件的定位策略和层叠上下文。

到这里，我们也就讲完了《Bootstrap全屏遮罩层怎么实现》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！