javascript - 无法关闭弹出窗口

Question

我用 html 和 css 制作了一个弹出窗口，当我点击一个按钮时，它应该用 css 关闭弹出窗口:

function creditsPopUpClose(){
    document.getElementById("popUp").style.opacity = 0;
    document.getElementById("bodyid").style.opacity = 1;
    audio2.play();
}

但它不会关闭弹出窗口，而是会打开另一个弹出窗口。

function creditsPopUpOpen(){
    document.getElementById("popUp").style.opacity = 1;
    document.getElementById("bodyid").style.opacity = 0.5; 
    audio.play();
}

function creditsPopUpClose(){
    document.getElementById("popUp").style.opacity = 0;
    document.getElementById("bodyid").style.opacity = 1;
    audio2.play();
}

function pricesPopUpOpen(){
    document.getElementById("pricesPopUp").style.opacity = 1;
    document.getElementById("bodyid").style.opacity = 0.5; 
    audio.play();
}

function pricesPopUpClose(){
    document.getElementById("pricesPopUp").style.opacity = 0;
    document.getElementById("bodyid").style.opacity = 1;
    audio2.play();
}

(打开价格弹出窗口)

<div class="popUp" id="popUp">
    <p>Made by Nano-Geek 😉</p>
    <p>
        <a target="_blank" href="https://www.zapsplat.com/sound-effect-category/button-clicks/">Sounds Effects</a> ●
        <a target="_blank" href="https://icons8.com">Favicon</a>
        <a style="color: #fff;" onclick="creditsPopUpClose()">Close</a>
    </p>
</div>

<div class="popUp" id="pricesPopUp">
    <p class="priceText">
        Autoclicker : <p id="autoclickerPrice"></p> clicks.<br>
        Factory : <p id="factoryPrice"></p> clicks.
    </p>
    <a style="color: #fff;" onclick="pricesPopUpClose()">Close</a>
</div>

我看不出问题出在哪里，是我的浏览器？

Answer 1

我评论了你的 audio.play(); 函数以防止未定义的错误。当您使用弹出窗口时，您不会隐藏正文，也不会使用 opacity 属性。只需在它上面显示一些东西(使用 z-index 和 position: fixed 和 display: block 属性)

function creditsPopUpOpen(){
    document.getElementById("popUp").style.display = 'block';
    //audio.play();
}

function creditsPopUpClose(){
    document.getElementById("popUp").style.display = 'none';
    //audio2.play();
}

function pricesPopUpOpen(){
    document.getElementById("pricesPopUp").style.display = 'block';
    //audio.play();
}

function pricesPopUpClose(){
    document.getElementById("pricesPopUp").style.display = 'none';
    //audio2.play();
}

a{
  color: #000;
  cursor: pointer;
}
.popUp{
  display: none;
  position: fixed;
  z-index: 999;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  background-color: rgba(255,255,0,0.9)
}

<div class="popUp" id="popUp">
    <p>Made by Nano-Geek 😉</p>
    <div>
        <a target="_blank" href="https://www.zapsplat.com/sound-effect-category/button-clicks/">Sounds Effects</a> ●
        <a target="_blank" href="https://icons8.com">Favicon</a>
        <a style="color: #ff0000;" onclick="creditsPopUpClose()">Close</a>
    </div>
</div>

<div class="popUp" id="pricesPopUp">
    <div class="priceText">
        Autoclicker : <p id="autoclickerPrice"></p> clicks.<br>
        Factory : <p id="factoryPrice"></p> clicks.
    </div>
    <a style="color: #ff0000;" onclick="pricesPopUpClose()">Close</a>
</div>

<a onclick='creditsPopUpOpen()'>creditsPopUpOpen</a>
<br />
<br />
<a onclick='pricesPopUpOpen()'>pricesPopUpOpen</a>