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

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

要实现“点击触发弹窗，同时背景模糊但弹窗自身不模糊”的效果，关键在于分离渲染层级：不能对 <body> 或整个页面直接加 blur，否则弹窗（作为子元素）也会被模糊；而应将可模糊的内容与弹窗设为同级兄弟元素，确保 filter 仅作用于背景区域。

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

将原 <body> 中的主内容（如 <section>）包裹进一个新容器（例如 <div id="blurme">），再让弹窗 <div id="field"> 与其平级并置于 <body> 下——这样 #blurme 可被独立模糊，而 #field 不受其影响：

<body>
  <!-- 可被模糊的主内容区域 -->
  <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>
  </div>
</body>

✅ JavaScript 控制逻辑

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

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

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; /* 高于模糊容器 */
  }

⚠️ 注意事项：

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

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