通过将页面主要内容包裹在独立容器中，并对容器应用 CSS filter: blur()，同时确保弹窗元素位于该容器外部，即可实现点击触发时仅背景模糊、弹窗保持清晰的视觉效果。
通过将页面主要内容包裹在独立容器中，并对容器应用 css `filter: blur()`，同时确保弹窗元素位于该容器外部，即可实现点击触发时仅背景模糊、弹窗保持清晰的视觉效果。
要实现“弹窗显示时背景模糊，弹窗自身清晰”的效果，关键在于DOM 结构设计与样式作用域的精确控制：filter: blur() 会作用于元素及其所有子元素，因此不能直接应用于 <body> 或包含弹窗的父容器；必须将需要模糊的内容与弹窗置于同级、互不嵌套的兄弟节点中。
✅ 正确的 DOM 结构示例
<body>
<!-- 模糊区域：仅包裹页面主体内容 -->
<div id="blurme">
<section>
<a id="forgot">Forgot your password? Press me</a>
</section>
</div>
<!-- 弹窗：与 #blurme 平级，不在其内部 -->
<div id="field">
<div id="content">
<p>Here you can set your password back</p>
</div>
</div>
</body>✅ 对应的 JavaScript 控制逻辑
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)'; // 仅模糊 #blurme 及其子元素
});✅ 必备的 CSS 样式（含优化建议）
#field {
display: none;
position: fixed; /* 推荐使用 fixed 而非 absolute，避免滚动时错位 */
top: 80px;
left: 50%;
transform: translateX(-50%); /* 居中更可靠 */
width: 300px;
z-index: 1000; /* 确保弹窗在模糊层之上 */
}
#content {
background-color: #000;
padding: 40px;
color: #fff;
border-radius: 8px;
}
#forgot {
color: #000;
text-decoration: underline;
cursor: pointer;
}
/* 可选：添加过渡动画提升体验 */
#blurme {
transition: filter 0.3s ease;
}⚠️ 注意事项
- 层级（z-index）必须明确：弹窗需设置足够高的 z-index（如 1000），否则可能被模糊层遮挡；
- 避免对 <body> 直接设 blur：会导致整个页面（含弹窗）一同模糊；
- 性能提示：filter: blur() 在低端设备上可能影响渲染性能，建议模糊值控制在 2px–8px 之间，避免过度使用；
- 可访问性补充：模糊背景时，建议同步降低背景对比度或添加半透明遮罩（如 ::before 伪元素 + rgba(0,0,0,0.3)），提升文字可读性。
通过这种结构分离 + 精准作用域控制的方式，既能满足视觉设计需求，又保持代码清晰、可维护性强。
