显示新的时关闭旧的弹出窗口

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

在您的示例中执行此操作的最简单方法是在跨度上重用该类，而不是使它们独一无二。这样您就可以选择所有课程，隐藏它们，然后显示您当前的课程。

例子：

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>