如何实现网页背景模糊且指定区域不可交互？

这个需求的核心实现分为两个部分：背景视觉模糊效果、背景交互事件拦截，以下是原生HTML/CSS/JS的可运行实现方案：

1. 基础HTML结构 #

<!-- 页面根容器，所有非弹出层的原有内容都放在这个容器内 -->
<div id="page-root">
  <button id="open-modal-btn">打开弹出层</button>
  <p>页面原有内容、按钮、表单等组件都放在此处</p>
</div>

<!-- 弹出层容器，和page-root平级，放在body标签的最末尾 -->
<div id="modal" class="modal-hidden">
  <!-- 全屏遮罩层，用于拦截背景点击 -->
  <div class="modal-mask"></div>
  <!-- 弹出层内容区域 -->
  <div class="modal-content">
    <p>弹出层的自定义内容</p>
    <button id="close-modal-btn">关闭弹出层</button>
  </div>
</div>

2. CSS样式代码 #

/* 页面根容器默认样式，加过渡效果让模糊更顺滑 */
#page-root {
  transition: filter 0.3s ease;
}

/* 弹出层打开时的根容器状态 */
#page-root.modal-open {
  filter: blur(4px); /* 背景模糊效果，数值可按需调整 */
  pointer-events: none; /* 拦截所有根容器内的点击、hover等交互事件 */
  user-select: none; /* 额外禁止背景文本选中，提升体验 */
}

/* 弹出层基础样式，层级要高于所有页面内容 */
#modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999;
}

/* 弹出层隐藏状态 */
.modal-hidden {
  display: none;
}

/* 全屏遮罩样式 */
.modal-mask {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2); /* 半透明遮罩，可按需调整透明度和颜色 */
}

/* 弹出层内容框样式 */
.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  padding: 24px;
  border-radius: 8px;
  z-index: 1000;
  pointer-events: auto; /* 恢复弹出层自身的交互权限，避免内容无法点击 */
}

3. JS控制逻辑 #

const openModalBtn = document.getElementById('open-modal-btn')
const closeModalBtn = document.getElementById('close-modal-btn')
const pageRoot = document.getElementById('page-root')
const modal = document.getElementById('modal')
const modalMask = document.querySelector('.modal-mask')

// 打开弹出层逻辑
const handleOpenModal = () => {
  pageRoot.classList.add('modal-open')
  modal.classList.remove('modal-hidden')
  document.body.style.overflow = 'hidden' // 禁止弹出层打开时背景滚动
}

// 关闭弹出层逻辑
const handleCloseModal = () => {
  pageRoot.classList.remove('modal-open')
  modal.classList.add('modal-hidden')
  document.body.style.overflow = 'auto' // 恢复页面滚动
}

// 绑定事件
openModalBtn.addEventListener('click', handleOpenModal)
closeModalBtn.addEventListener('click', handleCloseModal)
modalMask.addEventListener('click', handleCloseModal) // 点击遮罩也可关闭弹出层

注意事项 #

• 弹出层容器必须和页面根容器平级，不要放在page-root内部，否则会继承模糊效果和pointer-events: none属性，导致弹出层自身内容无法操作
• 如果是Vue/React等框架项目，可以把这段逻辑封装成公共组件，通过状态变量控制类名和弹出层显隐即可
• 模糊半径、遮罩透明度、弹出层宽高样式都可以根据你的设计需求自由调整

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