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>

无法关闭弹出窗口

1 个答案: