Question

我的问题是弹出窗口将打开，但是我找不到关闭它的方法。这是CSS代码

 .popup .overlay {
    position:fixed;
    top:0px;
    left:0px;
    width:100vw;
    height:100vh;
    background:rgba(0,0,0,0.7);
    z-index:1;
    display:none;
 }
  
 .popup .content {
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) scale(0);
    background:#fff;
    width:650px; 
    height:650px;
    z-index:2;
    text-align:left;
    padding:20px;
    box-sizing:border-box;
    font-family:"Open Sans",sans-serif;
 }
  
 .popup .close-btn {
    cursor:pointer;
    position:absolute;
    right:25px;
    top:25px;
    width:30px;
    height:30px;
    background:#222;
    color:#fff;
    font-size:50px;
    font-weight:600;
    line-height:30px;
    text-align:center;
    border-radius:50%;
 }
  
 .popup.active .overlay {
    display:block;
 }
  
 .popup.active .content {
    transition:all 300ms ease-in-out;
    transform:translate(-50%,-50%) scale(1);
 }
     
 .checkboxOneTop {
    position: absolute;
    bottom: 1145px; 
    right: 384px; 
    width: 163px ; 
    height: 163px; 
    opacity: .5;
 }

以下是对这个问题很重要的HTML代码：

<div class="popup" id="topCheck1_popup">
   <div class="overlay"></div>
     <div class="content">
       <div class="close-btn" onclick="togglePopup(this)">&times;</div>
        *Some code*
       </div>
     </div>
</div>
                

<input type="checkbox" class="checkboxOneTop" id="topCheck1" name = "topCheck1" value = "1 " onClick= "togglePopup(this)"/>

然后是JavaScript：

function togglePopup(c){
  var id = c.id;
  var idTwo = id.concat("_popup");
  if(document.getElementById(id).checked){
     document.getElementById(idTwo).classList.toggle("active");
  }
}

现在上面显示的是使用比以前更少的代码量的较新版本。我以前拥有的东西完全可以正常工作。 CSS相同，但是我更改了HTML和JavaScript

以下是我所知道的HTML：

<div class="popup" id="top_popup-2">
  <div class="overlay"></div>
    <div class="content">
      <div class="close-btn" onclick="toggleTopPopupTwo()">&times;</div>
        *Some Code*
      </div>
    </div>
</div>
<input type="checkbox" class="checkboxTwoTop" id="topCheck2" name = "topCheck2" value = "1 " onClick= "toggleTopPopupTwo()"/>

以下是我所知道的JavaScript：

function toggleTopPopupTwo(){
   if(document.getElementById("topCheck2").checked){
      document.getElementById("top_popup-2").classList.toggle("active");
   }

所以我想做的是，而不是让30个函数在单击一个复选框后打开和关闭一个特定的弹出窗口，而是要一个函数来检索被单击的复选框的ID，然后打开指定复选框的弹出。现在它们确实打开了，但是当我尝试关闭它时，什么也没有发生。到目前为止，我所知道的是，在单击关闭按钮时有效的代码中，访问document.getElementById("top_popup-2").classList.toggle("active");时，我想会更改toggle。（“ active”）的状态。但是，在我最新的尝试中，当我单击关闭按钮时，它甚至都不会进入if语句。任何帮助，将不胜感激！预先谢谢您！

当按下按钮时，弹出窗口将不会关闭

0 个答案: