CODEWITHSUNDEEP
javascriptcsspopup
nc1qs
nc1qs

Reputation: 3

How to make only 1 popup open at a time?

Using the following code as example, it currently allows for both popups to open simultaneously. In my real life application I will have over 30 popups. I wish to have code added to the script that will close any other previously opened popup when a new one is open. I'd also like to still be able to close the popup when I click on itself (as it is now). Could this be done with an "if" statement? Please share specific examples. I'm not good at creating my own JavaScript code, I can only copy/modify existing code. - Thank you in advanced!

Here's the example I'm using:

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

Upvotes: 0

Views: 1987

Answers (1)

Robert Wade
Robert Wade

Reputation: 5003

You just need a method to remove the show class from all popuptext elements before you open the new one. You can also eliminate the need for having a single function for each of your popup elements, by using one function and passing an argument to it for the popup it's to trigger:

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

Upvotes: 1

Related Questions