javascript - 关闭弹出窗口并打开新窗口

Question

我写了一段代码。我有按钮，每个按钮都会打开一个弹出窗口。在打开之前，我希望我的按钮关闭上一个弹出窗口并打开所需的弹出窗口。我正在切换类(class)。因此，我想首先使用 getElementsByClassName() 检查是否有任何可见的弹出窗口，如果有，则将其切换为隐藏。然后使用 getElementById() 将右侧切换为可见。我的问题是我不知道如何检查 .show 类的可见性，如果在我的 Function2() 中，我首先将按类切换，然后我无法在其后按 id 切换。这是为什么？所以我需要使用 If(the style isvisible in element i ) {then popups[i].classList.toggle("show");} 在此之后我想使用:

var popup = document.getElementById("myPopup2");
  popup.classList.toggle("show");

但它不起作用。或者有更好的方法来做到这一点？

function myFunction2() {

var popups = document.getElementsByClassName('popuptext');
  for(var i = 0; i < 5; i++)
  { 
 popups[i].classList.toggle("show");
 console.log(1);
 
 }
 var popup = document.getElementById("myPopup2");
  popup.classList.toggle("show");
  console.log(2);
 }
 



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

   

 .popup {
      position: absolute;
      display: inline-block;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: auto;
      
    
      }
    /* POPUPS--------START------------------------------------------------------------------------------------------------------- */
      .popup .popuptext {
      visibility: hidden;width: 27%; height: 93%;background-color: #fff;
       color: #004;text-align: left; border-radius: 0px;padding: 10px;
      position: fixed ; top: 48%;left: 20%;transform: translate(-50%, -50%);
       margin-left: -80px;border-left: 75px solid white; overflow:auto;border-right: 10px solid white;border-bottom: 35px solid white;
       z-index: 10;border-top: 35px solid white;
      box-shadow: inset 0 0 0 rgba(255,255,255,0.5), 2px 20px 2px rgba(0, 0, 0, 0.19);
    }
    
     /* POPUPS----------------END------------------------------------------------------------------------------------------ */
     
     /* 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% ;}
      }
    
      /* ------------------------------------------------popup hide and show end*/
    
    body{
      
      font-family:"Trebuchet MS", Helvetica, sans-serif;
      font-size:15px;
      color: #000;
     bgcolor="#fff"
      text-transform:uppercase;
      //overflow-x:hidden;
    }
    
                  h1{
                  font-size:80px;
                  text-align:right;
                  position:bottom;
                  right:340px;
                  top:300px;
                  font-weight:normal;
    			  }
    button{
       border: none; padding: 12px;
       text-align: center;text-decoration: none;  display: inline-block;
        cursor: auto; float: right;
     
      
    }  
    .button1 {padding: 12px;border-radius: 100%;position: absolute;left: 1445px;top: 459px; background-image: -webkit-linear-gradient(#FF0000 40%,  Tomato 100%);
        background-image: linear-gradient(#FF0000 40%,  Tomato 100%);
       }		
    .button2 {padding: 12px;border-radius: 100%;position: absolute;left: 1212px;top: 785px; background-image: -webkit-linear-gradient(#FF0000 40%,  Tomato 100%);
        background-image: linear-gradient(#FF0000 40%,  Tomato 100%);
       } 	
    .button3 {padding: 12px;position: absolute;left: 1412px;top: 785px; border-radius: 100%; background-image: -webkit-linear-gradient(#FF0000 40%,  Tomato 100%);
        background-image: linear-gradient(#FF0000 40%,  Tomato 100%);
       } 	
.button4 {padding: 12px;border-radius: 100%;position: absolute;left: 140px;top: 78px; background-image: -webkit-linear-gradient(#FF0000 40%,  Tomato 100%);
    background-image: linear-gradient(#FF0000 40%,  Tomato 100%);
   } 	

<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>
<div class="popuptext" id="myPopup2">
   <p>
    Lubja tn. 4
	
	</p>
<p>
  12.07.2016 
 
 </p>
  <img class="manImg" alt="Pilt"  src="Lubja/1.jpg">
  <img class="manImg" alt="Pilt"  src="Lubja/2.jpg">
  <img class="manImg" alt="Pilt"  src="Lubja/3.jpg">
  <img class="manImg" alt="Pilt"  src="Lubja/4.jpg">
  
</div>
</div>

<!-- Buttons on map start -->
<div class="popup" onclick="myFunction3()"><button class="button button3" id="button3"></button>
<div class="popuptext" id="myPopup3">
   <p>
    Koor
</p>
  Tühi
  <p>
    
</p>
  <img class="manImg" alt="Pilt"  src="Lubja/1.jpg">
  </div>
</div>
<!-- Buttons on map end -->
<!-- Buttons on map start -->
<div class="popup" onclick="myFunction4()"><button class="button button4" id="button4"></button>
<div class="popuptext" id="myPopup4">
   <p>
    Tühi
</p>
  Tühi
  <p>
    
</p>
  <img class="manImg" alt="Pilt"  src="Lubja/1.jpg">
  </div>
</div>

Answer 1

我只更新了你的 JS 和一些 HTML。

使代码可重用。可重用的代码就是好代码。当您可以使用一个函数完成所有操作时，不要为每个按钮创建一个函数。

function showPopup(popupID) {
  var popups = document.querySelectorAll(".popuptext");

  for (var i = 0; i < popups.length; i++) {
    popups[i].classList.remove("show");
  }

  var popup = document.getElementById(popupID);
  popup.classList.add("show");
}

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


/* POPUPS--------START------------------------------------------------------------------------------------------------------- */

.popup .popuptext {
  visibility: hidden;
  width: 27%;
  height: 93%;
  background-color: #fff;
  color: #004;
  text-align: left;
  border-radius: 0px;
  padding: 10px;
  position: fixed;
  top: 48%;
  left: 20%;
  transform: translate(-50%, -50%);
  margin-left: -80px;
  border-left: 75px solid white;
  overflow: auto;
  border-right: 10px solid white;
  border-bottom: 35px solid white;
  z-index: 10;
  border-top: 35px solid white;
  box-shadow: inset 0 0 0 rgba(255, 255, 255, 0.5), 2px 20px 2px rgba(0, 0, 0, 0.19);
}


/* POPUPS----------------END------------------------------------------------------------------------------------------ */


/* 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%;
  }
}


/* ------------------------------------------------popup hide and show end*/

body {
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  font-size: 15px;
  color: #000;
  bgcolor="#fff" text-transform: uppercase;
  //overflow-x:hidden;
}

h1 {
  font-size: 80px;
  text-align: right;
  position: bottom;
  right: 340px;
  top: 300px;
  font-weight: normal;
}

button {
  border: none;
  padding: 12px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: auto;
  float: right;
}

.button1 {
  padding: 12px;
  border-radius: 100%;
  position: absolute;
  left: 1445px;
  top: 459px;
  background-image: -webkit-linear-gradient(#FF0000 40%, Tomato 100%);
  background-image: linear-gradient(#FF0000 40%, Tomato 100%);
}

.button2 {
  padding: 12px;
  border-radius: 100%;
  position: absolute;
  left: 1212px;
  top: 785px;
  background-image: -webkit-linear-gradient(#FF0000 40%, Tomato 100%);
  background-image: linear-gradient(#FF0000 40%, Tomato 100%);
}

.button3 {
  padding: 12px;
  position: absolute;
  left: 1412px;
  top: 785px;
  border-radius: 100%;
  background-image: -webkit-linear-gradient(#FF0000 40%, Tomato 100%);
  background-image: linear-gradient(#FF0000 40%, Tomato 100%);
}

.button4 {
  padding: 12px;
  border-radius: 100%;
  position: absolute;
  left: 140px;
  top: 78px;
  background-image: -webkit-linear-gradient(#FF0000 40%, Tomato 100%);
  background-image: linear-gradient(#FF0000 40%, Tomato 100%);
}

<div class="popup" onclick="showPopup('myPopup')">
  <button class="button button1" id="button1"></button>
  <span class="popuptext" id="myPopup">text of popup;</span>
</div>
<div class="popup" onclick="showPopup('myPopup2')">
  <button class="button button2" id="button2"></button>
  <div class="popuptext" id="myPopup2">
    <p>
      L 4 Some text here some text
    </p>

    <p>
      12.07.2016 
    </p>

    <img class="manImg" alt="Pilt" src="Lubja/1.jpg">
    <img class="manImg" alt="Pilt" src="Lubja/2.jpg">
    <img class="manImg" alt="Pilt" src="Lubja/3.jpg">
    <img class="manImg" alt="Pilt" src="Lubja/4.jpg">

  </div>
</div>

<!-- Buttons on map start -->
<div class="popup" onclick="showPopup('myPopup3')">
  <button class="button button3" id="button3"></button>
  <div class="popuptext" id="myPopup3">
    <p>
      Koor
    </p>
    Tühi
    <p>

    </p>
    <img class="manImg" alt="Pilt" src="Lubja/1.jpg">
  </div>
</div>
<!-- Buttons on map end -->
<!-- Buttons on map start -->
<div class="popup" onclick="showPopup('myPopup4')">
  <button class="button button4" id="button4"></button>
  <div class="popuptext" id="myPopup4">
    <p>
      Tühi
    </p>
    Tühi
    <p>

    </p>
    <img class="manImg" alt="Pilt" src="Lubja/1.jpg">
  </div>
</div>