多Popup模态框内容重复且被背景模糊覆盖问题求助

问题1：所有弹窗点击后显示相同内容 #

当前toggle()函数每次调用都会同时激活两个弹窗，导致点击任意按钮都会打开所有弹窗。解决方法是让函数只针对特定弹窗操作：

1. 修改HTML中的onclick事件，传入对应弹窗的ID：

   <button class="pop-up-box-btn" onclick="toggle('skills-pop-up-box')">⁺</button>
   <!-- 经验按钮同理 -->
   <button class="pop-up-box-btn" onclick="toggle('experience-pop-up-box')">⁺</button>
   

2. 更新JavaScript函数，接收弹窗ID参数，只切换目标弹窗的状态，并根据是否有弹窗激活来控制背景模糊：

   function toggle(popupId) {
       const blur = document.getElementById('blur');
       const targetPopup = document.getElementById(popupId);
       
       targetPopup.classList.toggle('active');
       
       // 检查是否有任何弹窗处于激活状态
       const hasActivePopup = Array.from(document.querySelectorAll('.skill-popup, .experience-popup'))
           .some(popup => popup.classList.contains('active'));
       
       blur.classList.toggle('active', hasActivePopup);
   }
   

问题2：背景模糊覆盖弹窗 #

弹窗被包含在<main id="blur">容器内，而filter: blur会作用于所有子元素，即使设置了z-index也无法避免。解决方法是将弹窗移到模糊容器之外：

调整HTML结构，把弹窗div放到<main>标签外面：

<main class="grid-container" id="blur">
    <!-- 保留原有的article元素 -->
</main>

<!-- 弹窗移到main外部 -->
<div class="skill-popup" id="skills-pop-up-box">...</div>
<div class="experience-popup" id="experience-pop-up-box">...</div>

优化后的完整代码片段 #

HTML #

<main class="grid-container" id="blur">
    <article class="grid-item grid-item-3 tech-skills">
        <button class="pop-up-box-btn" onclick="toggle('skills-pop-up-box')">⁺</button>
        <h1>Technical Skills</h1>
    </article>

    <article class="grid-item grid-item-4 professional-experience">
        <button class="pop-up-box-btn" onclick="toggle('experience-pop-up-box')">⁺</button>
        <h1>Professional Experience</h1>
    </article>
</main>

<div class="skill-popup" id="skills-pop-up-box">
    <h2>skills</h2>
    <p>some more stuff</p>
    <a href="#" onclick="toggle('skills-pop-up-box')">Close</a>
</div>

<div class="experience-popup" id="experience-pop-up-box">
    <h2>experience</h2>
    <p>some more stuff</p>
    <a href="#" onclick="toggle('experience-pop-up-box')">Close</a>
</div>

CSS #

.grid-container#blur.active {
    filter: blur(20px);
    z-index: 1;
}

#skills-pop-up-box, #experience-pop-up-box {
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 600px;
    padding: 50px;
    box-shadow: 0px 3px 6px 0.5px rgba(62, 66, 66, 0.286);
    background: #fff;
    visibility: hidden;
    opacity: 0;
    transition: 0.5s;
    z-index: 100;
}

#skills-pop-up-box.active, #experience-pop-up-box.active {
    visibility: visible;
    opacity: 1;
    transition: 0.5s;
    top: 50%;
    z-index: 100;
}

JavaScript #

function toggle(popupId) {
    const blur = document.getElementById('blur');
    const targetPopup = document.getElementById(popupId);
    
    targetPopup.classList.toggle('active');
    
    const hasActivePopup = Array.from(document.querySelectorAll('.skill-popup, .experience-popup'))
        .some(popup => popup.classList.contains('active'));
    
    blur.classList.toggle('active', hasActivePopup);
}

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