Закрытие старого всплывающего окна при отображении нового

Question

Закрытие старого всплывающего окна при отображении нового:

У меня есть кнопки на моей странице, и каждое из них генерирует всплывающее окно. Я хотел бы закрыть предыдущее всплывающее окно, прежде чем открывать новое (поэтому каждое всплывающее окно открывается, когда все остальные закрыты). Как я могу это сделать? Должен ли я использовать функции, которые у меня уже есть?

Я пробовал несколько вещей, но ни одна из них не сработала. Пожалуйста, помогите.

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

function myFunction() {
  var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");
}

function myFunction3() {
  var popup = document.getElementById("myPopup3");
  popup.classList.toggle("show");
}

function hideCurrentPopups() {
  var popups = document.getElementsByClass("popuptext");
   for(var i = 0; i < divsToHide.length; i++){
    popups[i].style.visibility = "hidden"; // or
}}

.popup {
  position: absolute;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: auto;
}

.popup .popuptext {
  visibility: hidden;
  width: 27%;
  height: 70%;
  background-color: #000;
  color: #000;
  text-align: left;
  border-radius: 0px;
  padding: 10px;
  position: fixed;
  top: 48%;
  left: 54%;
  transform: translate(-50%, -50%);
  margin-left: -80px;
  border: 1px solid white;
  overflow: auto;
}




/* Toggle this class - hide and show the popup */

.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
  animation: move 1s;
}


/* Add animation (fade in the popup) */

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes move {
  from {
    left: 0%;
  }
  to {
    top: 48%;
  }
}

@-webkit-keyframes move {
  from {
    left: 0%;
  }
  to {
    top: 48%;
  }
}

@-webkit-keyframes move {
  from {
    left: 0%;
  }
  to {
    top: 48%;
  }
}

button {
  border: none;
  color: white;
  padding: 12px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 6px;
  margin: 1px 1px;
  cursor: auto;
  float: right;
  background-image: -webkit-linear-gradient(#FF0000 40%, Tomato 100%);
  background-image: linear-gradient(#FF0000 40%, Tomato 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 1px rgba(0, 0, 0, 0.19);
}

.button1 {
  border-radius: 0%;
  position: absolute;
  left: 1445px;
  top: 459px;
}

.button2 {
  border-radius: 100%;
  position: absolute;
  left: 1212px;
  top: 785px;
}

.button3 {
  position: absolute;
  left: 1412px;
  top: 785px;
  border-radius: 100%;
}

<div class="popup" onclick="hideCurrentPopups()">
  <button class="button button1" ; id="button1"></button>
  <span class="popuptext" id="myPopup">text of popup;</span></div>
<div class="popup" onclick="myFunction2()">
  <button class="button button2" ; id="button2"></button>
  <span class="popuptext" id="myPopup2">
  </span>
</div>
<div class="popup" onclick="myFunction3()">
  <button class="button button3" ; id="button3"></button>
  <span class="popuptext" id="myPopup3">
 
  </span>
</div>

Answer 1

Самый простой способ сделать это в вашем примере - повторно использовать класс в span, а не делать его уникальным. Таким образом, вы можете сделать выбор всех классов, скрыть их, а затем показать свои текущие.

Пример:

function hideCurrentPopups() {
  var popups = document.getElementsByClass('popuptext');
   for(var i = 0; i < divsToHide.length; i++){
        popups[i].style.visibility = "hidden"; // or
        popups[i].style.display = "none"; // depending on what you're doing
    }
}

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

function myFunction() {
  var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");
}

function myFunction3() {
  var popup = document.getElementById("myPopup3");
  popup.classList.toggle("show");
}

Разметка:

<div class="popup" onclick="myFunction()">
  <button class="button button1" ; id="button1"></button>
  <span class="popuptext" id="myPopup">text of popup;</span></div>
<div class="popup" onclick="myFunction2()">
  <button class="button button2" ; id="button2"></button>
  <span class="popuptext" id="myPopup2">
  </span>
</div>
<div class="popup" onclick="myFunction3()">
  <button class="button button3" ; id="button3"></button>
  <span class="popuptext3" id="myPopup3">

  </span>
</div>