javascript 我的弹出模态显示相同的信息时，点击，模糊是涵盖了弹出框

fdbelqdn 于 2023-05-27 发布在 Java

关注(0)|答案(1)|浏览(167)

我一直在寻找，无法找到答案，所以我希望有人能帮助。我正在创建多个弹出框，将显示不同的信息，当它弹出屏幕后面将模糊。我的问题是，所有的弹出框都显示了一个信息元素，而忘记了其余的。沿着着这个问题的是屏幕的模糊也覆盖了弹出框，我已经尝试了z索引和其他一些东西，但我仍然迷路了。如果需要的话，我将分享我的代码片段和我的代码库以获得完整的图片。我省略了第二个弹出框的CSS，因为它是相同的设置。（我只使用2个，直到我解决问题）
https://github.com/CheyenneTech/Digital-Resume

<main class="grid-container" id="blur">



<article class="grid-item grid-item-3 tech-skills">
        <button class="pop-up-box-btn" href="#" onclick="toggle()">⁺</button>
        <h1>Technical Skills</h1>
</article>

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

<article class="grid-item grid-item-4 professional-experience">
    <button class="pop-up-box-btn" href="#" onclick="toggle()">⁺</button>
    <h1>Professional Experience</h1>
</article>
<div class="experience-popup" id="experience-pop-up-box">
    <h2>experience</h2>
    <p>some more stuff</p>
    <a href="#" onclick="toggle()">Close</a>
</div>

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

/* pop up boxes */

#skills-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 {
    visibility: visible;
    opacity: 1;
    transition: 0.5s;
    top: 50%;
    z-index: 100;
}


 function toggle(){
    let blur = document.getElementById('blur');
    blur.classList.toggle('active');
    let skillPopUp = document.getElementById('skills-pop-up-box');
    skillPopUp.classList.toggle('active');
    let experiencePopUp = document.getElementById('experience-pop-up-box');
    experiencePopUp.classList.toggle('active');

}

JavaScript

来源：https://stackoverflow.com/questions/76328497/my-pop-up-modals-are-showing-the-same-info-when-clicked-and-the-blur-is-coverin

1条答案

按热度按时间

gblwokeq1#

对于第一个问题，所有弹出框显示相同的内容，这是因为你添加事件到您的所有按钮具有相同的功能toggle，这是好的，但当这运行，并达到toggle功能，它将做同样的事情如下（阅读评论）

let blur = document.getElementById('blur');
    blur.classList.toggle('active');
    let skillPopUp = document.getElementById('skills-pop-up-box');
    skillPopUp.classList.toggle('active'); // firstly this will be active
    let experiencePopUp = document.getElementById('experience-pop-up-box');
    experiencePopUp.classList.toggle('active'); // lastly every time whatever you click this will run so every time the experience popup is the one that will be shown

所以解决办法是
1.在您的HTML中，您可以将ID传递给切换函数，如下所示

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

    <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>

你应该对所有其他卡做同样的事情。
2.在JavaScript中，使用传递的ID向其中添加/移除活动类

function toggle(id){
    const blur = document.getElementById('blur');
    blur.classList.toggle('active');

    const currentPopUp = document.getElementById(id);
    currentPopUp.classList.toggle('active');
}

对于第二个问题，我将首先删除此css代码部分

.grid-container#blur.active {
  /* */
}

在html中，我会添加一个新的div作为覆盖层，首先在主体中的main标签之前，如下所示：

<body>
    <div class="overlay"></div>
    <main class="grid-container" id="blur">

在javascript中，通过添加最后两行来修改toggle函数：

function toggle(id){
    const blur = document.getElementById('blur');
    blur.classList.toggle('active');

    const currentPopUp = document.getElementById(id);
    currentPopUp.classList.toggle('active');

    const overlay = document.querySelector('.overlay');
    overlay.classList.toggle('active');
}

在CSS中添加这些行

.overlay {
  background-color: black; /* whatever color */
  opacity: 40%; /* whatever percent, Note you can use hexa or rgba color instead */
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: none;
}
.overlay.active {
  display: block;
}

赞(0）回复(0）举报 2023-05-27

我来回答

javascript 我的弹出模态显示相同的信息时，点击，模糊是涵盖了弹出框

1条答案

相关问题

热门标签

最新问答