Angular、CSS、HTML实现添加遮罩层禁用全部DOM仅弹窗组件可操作

核心思路 #

通过全局状态控制两个独立DOM元素的显隐：全屏遮罩层、登录弹窗，通过z-index控制三层优先级：原生页面内容（navbar/body/footer） < 全屏遮罩层 < 登录弹窗，让遮罩层拦截所有底层内容的交互，仅保留最上层登录弹窗的操作权限。

具体实现步骤 #

• 首先在全局根组件（即包裹navbar、body、footer的父级容器）内添加遮罩层、登录弹窗两个独立DOM节点，不要把这两个节点放在navbar/body/footer任意子组件内部，避免父组件的position、z-index、overflow属性限制全屏展示和层级优先级。
• 基础样式配置：
  • 遮罩层默认隐藏，固定定位铺满整个视口，背景设为半透明黑色（比如rgba(0,0,0,0.5)），z-index设为999，添加pointer-events: auto属性拦截所有点击、滚动等交互。
  • 登录弹窗默认隐藏，固定定位居中显示，z-index设为1000（比遮罩层高即可），确保不会被遮罩遮挡，正常保留交互能力。
• 状态联动配置：
  • 在全局状态（框架项目可使用Vuex/Pinia/React Context，原生项目可挂载到window全局变量）中定义showLoginModal布尔变量，默认值为false。
  • navbar内的登录按钮点击时，将showLoginModal设为true。
  • 根组件监听showLoginModal状态：状态为true时同时显示遮罩层和登录弹窗，同时给body添加overflow: hidden禁止页面滚动；状态为false时隐藏遮罩层和弹窗，恢复页面滚动权限，登录成功、点击关闭按钮、点击遮罩层、按下ESC键时都可以把状态改回false。

原生JS+CSS参考实现 #

/* 全局遮罩层样式 */
.global-mask {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  pointer-events: auto;
}
/* 登录弹窗样式 */
.login-modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  padding: 24px;
  background: #fff;
  border-radius: 8px;
  z-index: 1000;
}
/* 显式控制类 */
body.show-login-modal {
  overflow: hidden;
}
body.show-login-modal .global-mask,
body.show-login-modal .login-modal {
  display: block;
}

// 登录按钮点击逻辑（写在navbar组件内）
document.querySelector('#login-btn').addEventListener('click', () => {
  document.body.classList.add('show-login-modal')
})

// 关闭弹窗逻辑（写在弹窗组件内）
const closeLogin = () => {
  document.body.classList.remove('show-login-modal')
}
// 点击关闭按钮、遮罩层关闭弹窗
document.querySelector('#close-login-btn').addEventListener('click', closeLogin)
document.querySelector('.global-mask').addEventListener('click', closeLogin)
// 按下ESC关闭弹窗
document.addEventListener('keydown', (e) => {
  if(e.key === 'Escape' && document.body.classList.contains('show-login-modal')) {
    closeLogin()
  }
})

内容的提问来源于stack exchange，提问作者Lorenzo Tusorella