如何一次只打开一个弹出窗口？

Question

以下面的代码为例，它目前允许同时打开两个弹出窗口。在我现实生活中的应用程序中，我将有 30 多个弹出窗口。 我希望将代码添加到脚本中，以便在打开新的弹出窗口时关闭之前打开的任何其他弹出窗口。我还希望在单击自身时仍然能够关闭弹出窗口（就像现在一样）。这可以用“if”语句来完成吗？请分享具体的例子。我不擅长创建自己的 JavaScript 代码，我只能复制/修改现有代码。 - 提前谢谢你！

这是我正在使用的示例：

<!DOCTYPE html>
<html>
<style>
/* Popup container - can be anything you want */
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

/* The actual popup */
.popup .popuptext {
    visibility: hidden;
    width: 160px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -80px;
}



/* Toggle this class - hide and show the popup */
.popup .show {
    visibility: visible;
}



</style>
<body style="text-align:center">

<h2>Popup</h2>

<div class="popup" onclick="myFunction1()">Click me to toggle the popup!
  <span class="popuptext" id="myPopup1">A Simple Popup!</span>
</div>
<br>
<br>
<br>
<div class="popup" onclick="myFunction2()">Click!
  <span class="popuptext" id="myPopup2">A Popup!</span>
</div>

<script>
// When the user clicks on div, open the popup
function myFunction1() {
    var popup = document.getElementById('myPopup1');
    popup.classList.toggle('show');
}

function myFunction2() {
    var popup = document.getElementById('myPopup2');
    popup.classList.toggle('show');
}


</script>

</body>
</html>

Answer 1

在打开新元素之前，您只需要一种方法从所有 popuptext 元素中删除 show 类。您还可以通过使用一个函数并将参数传递给它以触发要触发的弹出窗口，从而消除对每个弹出元素使用单个函数的需要：

// When the user clicks on div, open the popup
function popup($target) {
    var popup = document.getElementById($target);
    closePopups($target);  
    popup.classList.toggle('show');
}


function closePopups($target) {
    var popups = document.getElementsByClassName('popuptext');
    for (i = 0; i < popups.length; i++) {
      if (popups[i].getAttribute('id') != $target) {
        popups[i].classList.remove('show');
        }
    }
}

/* Popup container - can be anything you want */
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

/* The actual popup */
.popup .popuptext {
    visibility: hidden;
    width: 160px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -80px;
}



/* Toggle this class - hide and show the popup */
.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

<h2>Popup</h2>

<div class="popup" onclick="popup('myPopup1')">Click me to toggle the popup!
  <span class="popuptext" id="myPopup1">A Simple Popup!</span>
</div>
<br>
<br>
<br>
<div class="popup" onclick="popup('myPopup2')">Click!
  <span class="popuptext" id="myPopup2">A Popup!</span>
</div>