如果您打开另一个弹出窗口，请关闭打开的弹出窗口答案

【问题标题】：Close the pop up that opens if you open another pop up如果您打开另一个弹出窗口，请关闭打开的弹出窗口
【发布时间】：2018-08-21 07:58:20
【问题描述】：

嘿，我做了几个弹出窗口。要关闭弹出窗口，请按打开的弹出窗口。我想让如果你打开一个新的弹出窗口然后关闭另一个弹出窗口。

例如，如果我打开一个弹出窗口 1。然后我打开弹出窗口 2，然后当弹出窗口 2 打开时，弹出窗口 1 关闭

这里是我的html代码

<body style="text-align:center">
<br><br><br>
<div class="popup" onclick="popUp1()">Click me!
  <span class="popuptext" id="myPopup1">Popup 1</span>
</div>
&nbsp; &nbsp; &nbsp;
<div class="popup" onclick="popUp2()">Click me!
  <span class="popuptext" id="myPopup2">Popup 2</span>
</div>

&nbsp; &nbsp; &nbsp;
<div class="popup" onclick="popUp3()">Click me!
  <span class="popuptext" id="myPopup3">Popup 3</span>
</div>

<script>
function popUp1() {
    var popup = document.getElementById("myPopup1");
    popup.classList.toggle("show");
}

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

function popUp3() {
    var popup = document.getElementById("myPopup3");
    popup.classList.toggle("show");
}
</script>

</body>

这是我的CSS

.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}    
.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;
}
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}    
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  -moz-animation: fadeIn 1s;
  -ms-animation: fadeIn 1s;
  animation: fadeIn 1s;
}    
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity:1 ; }
}

谢谢

【问题讨论】：

标签： html css user-interface popup frontend

【解决方案1】：

您需要一个 JavaScript 函数来执行此操作，如下所示：

 $('.popup').on('click', function() {
      $('.popup').each(function(i, elem){
          if ($(elem).hasClass('show') && this !== elem ) {
                $(elem).removeClass('show');
          }
      });
 });

【讨论】：

【解决方案2】：

我将尝试使用纯 JavaScript 来解释它，因为您没有像其他回复那样使用 jQuery。

此代码应删除所有具有show 类的弹出窗口，并将show 类添加到触发事件的弹出窗口。

   function closeOpenPopups (e) {
    var openpopups = document.querySelectorAll('.popup.show');
     openpopups.forEach(function(){
      this.classList.remove('show');
     });
      e.classList.add('show');
    }
    var popups = document.querySelectorAll('.popup');

您可以将其添加到 onclick 属性中，就像您在 HTML 上所做的那样

<div class="popup" onclick="closeOpenPopups()" >
 ...
</div>

希望对你有帮助，

【讨论】：