时间戳

首页 > 解决方案 > 如果您打开另一个弹出窗口，请关闭打开的弹出窗口

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

问题描述

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

例如，如果我打开一个弹出窗口 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 ; }
}

谢谢

标签： htmlcssuser-interfacepopupfrontend

解决方案

我将尝试使用纯 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>

希望能帮助到你，

推荐阅读