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

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

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

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

实现背景模糊（Backdrop Blur）效果的关键在于DOM 结构隔离：必须确保被模糊的元素是弹窗的兄弟节点（而非父节点），否则 filter: blur() 会级联作用于其所有子元素——包括弹窗本身，导致内容失真。

✅ 正确结构示例

将主页面内容（如

）包裹在一个专用容器（如

）内，而弹窗

与其同级并列，二者共同作为的直接子元素：

  <div id="blurme">
    <section><a id="forgot">Forgot your password? Press me</a>
    </section>
</div>
  <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="/ai/2892" title="Prompt Log"><img
														src="https://img.php.cn/upload/ai_manual/001/246/273/177985622821242.png" alt="Prompt Log" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/ai/2892" title="Prompt Log" class="overflowclass">Prompt Log</a>
													<p class="overflowclass">一款AI开发辅助工具，主要用于从 AI 编程会话日志（Clawdbot、Claude Code、Codex）中提取对话记录。该功能用于在用户要求导出提示词历史、会话日志或 `.jsonl` 格式的会话文件时使用，适合需要提升相关任务效率的用户。</p>
												</div>
												<a rel="nofollow" href="/ai/2892" title="Prompt Log" 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('#field')) return;
  if (forgotField.style.display === 'block') {
    forgotField.style.display = 'none';
    blurElement.style.filter = 'none'; // 恢复清晰背景
  }
});