如何实现弹窗弹出时模糊背景，而非弹窗自身？

核心思路 #

问题根源是直接给父容器加模糊时，子元素会继承该效果。正确做法是将页面主体内容与弹窗设为平行层级，让弹窗独立于主体内容之外，仅给主体内容添加模糊滤镜，就能避免弹窗被模糊。

修改后的完整代码 #

HTML结构调整 #

把原页面的主体内容（含"Forgot your password"链接的section）放入独立容器，弹窗保持与该容器同级：

<body id="login-section">
    <div id="page-content">
        <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>
    </div>
</body>

CSS样式修改 #

新增模糊类，给页面内容容器添加；同时调整弹窗层级确保其在内容上方：

#field {
    display: none;
    position: absolute; 
    top: 80px;
    right:0;
    left:0;
    margin: auto;
    width: 300px;
    z-index: 10; /* 确保弹窗在模糊背景上方 */
}
#content {
    background-color: black;
    padding: 40px;
    color: white;
}

#forgot {
    color: black;
}

/* 新增背景模糊类 */
.blur-background {
    filter: blur(20px);
    pointer-events: none; /* 可选：模糊后禁止背景内容交互 */
}

JavaScript逻辑更新 #

点击链接时给内容容器加模糊类并显示弹窗，可额外添加关闭弹窗时移除模糊的逻辑：

let forgotField = document.getElementById('field');
let forgot = document.getElementById('forgot');
let pageContent = document.getElementById('page-content');

forgot.addEventListener('click', () => {
    forgotField.style.display = 'block';
    pageContent.classList.add('blur-background');
});

// 可选：点击弹窗空白处关闭弹窗并移除模糊
forgotField.addEventListener('click', (e) => {
    if (e.target === forgotField) {
        forgotField.style.display = 'none';
        pageContent.classList.remove('blur-background');
    }
});

效果说明 #

• 弹窗与主体内容为同级元素，无嵌套关系，因此主体内容的模糊滤镜不会作用于弹窗。
• z-index:10保证弹窗始终在模糊背景上方，不会被遮挡。
• pointer-events: none可避免用户误触模糊后的背景内容，优化交互体验。

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