如何为弹出窗口实现背景模糊效果而不影响弹窗本身-html教程-PHP中文网

如何为弹出窗口实现背景模糊效果而不影响弹窗本身

通过将页面主体内容包裹在独立容器中，并仅对该容器应用 CSS filter: blur()，可在弹出窗口显示时模糊背景，同时保持弹窗内容清晰锐利。

通过将页面主体内容包裹在独立容器中，并仅对该容器应用 css `filter: blur()`，可在弹出窗口显示时模糊背景，同时保持弹窗内容清晰锐利。

要实现“点击触发弹窗，同时背景模糊但弹窗自身不模糊”的效果，关键在于分离渲染层级：不能对

或整个页面直接加 blur，否则弹窗（作为子元素）也会被模糊；而应将可模糊的内容与弹窗设为同级兄弟元素，确保 filter 仅作用于背景区域。

✅ 正确结构：父子分离 + 同级容器

将原

中的主内容（如

）包裹进一个新容器（例如

），再让弹窗

与其平级并置于下——这样 #blurme 可被独立模糊，而 #field 不受其影响：

  <!-- 可被模糊的主内容区域 -->
  <div id="blurme">
    <section><a id="forgot">Forgot your password? Press me</a>
    </section>
</div>

  <!-- 弹窗：与 #blurme 同级，不受其 filter 影响 -->
  <div id="field">
    <div id="content">
      <p>Here you can set your password back</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5092" title="PigX UI 前端开发"><img
														src="https://img.php.cn/upload/skill/000/000/081/179033410052138.jpg" alt="PigX UI 前端开发" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill5092" title="PigX UI 前端开发" class="overflowclass">PigX UI 前端开发</a>
													<p class="overflowclass">PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill5092" title="PigX UI 前端开发" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
    </div>
  </div>

✅ JavaScript 控制逻辑

在点击事件中，仅显示弹窗并为 #blurme 添加模糊样式；建议同时添加关闭功能以提升体验：

const forgotField = document.getElementById('field');
const forgot = document.getElementById('forgot');
const blurElement = document.getElementById('blurme');

// 显示弹窗 + 模糊背景
forgot.addEventListener('click', () => {
  forgotField.style.display = 'block';
  blurElement.style.filter = 'blur(5px)';
});

// 可选：点击弹窗外区域关闭（增强交互）
document.addEventListener('click', (e) => {
  if (e.target === forgotField || e.target.closest('#content')) return;
  if (forgotField.style.display === 'block') {
    forgotField.style.display = 'none';
    blurElement.style.filter = 'none';
  }
});

✅ CSS 补充建议（提升体验）

为 #blurme 添加 transition 实现平滑模糊动画：
```
#blurme {
  transition: filter 0.3s ease;
}
```

确保弹窗具有更高 z-index，避免被模糊层遮挡：

#field {
  position: absolute;
  z-index: 1000; /* 高于模糊容器 */
}

⚠️ 注意事项：

避免对或直接应用 filter，因其会作用于所有后代元素（包括弹窗）；
filter: blur() 有一定性能开销，生产环境建议控制模糊值（如 2px–8px），并配合 will-change: filter 或硬件加速优化；
若使用 position: fixed 弹窗，需确认其脱离文档流后仍能正确覆盖模糊区域。

通过这种结构化分离的设计，即可优雅、高效地实现「聚焦弹窗、虚化背景」的现代 UI 效果。