弹出窗口不会关闭

Question

有人能帮我吗？

无论我试了什么弹出窗口都不能关闭。。。

https://codepen.io/mrthiemann/pen/bgpnnex

<script>
//appends an "active" class to .popup and .popup-content when the "Open" button is clicked
$(".open").on("click", function() {
  $(".popup-overlay, .popup-content, .login-overlay, .login-overlay--content").addClass("active");
});

//removes the "active" class to .popup and .popup-content when the "Close" button is clicked 
$(".close, .popup-overlay, .login-overlay").on("click", function() {
  $(".popup-overlay, .popup-content, .login-overlay--content").removeClass("active");
});
</script>

我在codepen.io上集成了css代码。。。而我的帖子主要是代码。。。。

弹出窗口总是在打开页面时显示。 所以只针对那些没有注册的人。 我将能够安装这个循环之后。

我找到的大多数教程都与打开和关闭弹出窗口的按钮有关。 但对我来说它是永久开放的，应该“只能”关闭。

   
<div class="container">
<div class="login-overlay">
    <!-- Trigger the modal with a button -->
  <!-- NOTHING !!! -->
  <!-- the window is always shown when the page is opened -->


  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
      <div class="login-overlay--content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h3 class="modal-title">Willkommen auf dein-3d.com!!!</h3>
          <br>
        .....
        </div>
        <div class="modal-body">
          <ul class="list">
                                        <li>
                                        
                                      etc...
                                   
                                        </li>
                                    </ul>   
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default"><a href="/wp-login.php">Einloggen</button>
          <button type="button" class="btn btn-default"><a href="/wp-login.php?action=register">Registrieren</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
      </div>
    </div>
  </div>
  
</div>
</div>

Answer 1

这里有几个问题:

1. 没有对jQuery库的引用
2. 您省略了一个.login-overlay.active类，并且没有将.login-overlay的默认值设置为hidding
3. 要确保模式作为默认模式对用户可见，请将active类添加到元素的HTML

看起来你复制了一个例子，而不一定知道每个部分是如何工作的。 我在下面对工作代码进行了注释，以指出所做更改的位置。

null

//appends an "active" class to .popup and .popup-content when the "Open" button is clicked
$(".open").on("click", function() {
  $(".popup-overlay, .popup-content, .login-overlay").addClass("active");
});

//removes the "active" class to .popup and .popup-content when the "Close" button is clicked 
$(".close, .popup-overlay, .login-overlay").on("click", function() {
  $(".popup-overlay, .popup-content, .login-overlay").removeClass("active");
});

.login-overlay {
  /* DEFAULT HIDDEN - LIKE THE EXAMPLE, PRESUMABLY */
  visibility: hidden;
  position: absolute;
  flex-direction: row;
  z-index: 1;
  position: absolute;
  top: 100px;
  right: 100px;
  background-color: white;
  width: 286px;
  height: 266px;
  padding: 20px;
  box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.3);
  .opacity: 0;
  animation-name: fadein;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

  /* COPIED FROM EXAMPLE MODAL - LIKE THE EXAMPLE, PRESUMABLY */
.login-overlay.active {
  /*displays pop-up when "active" class is present*/
  visibility: visible;
}

.login-overlay::before {
  top: -9px;
  left: 200px;
  content: " ";
  border-color: blue;
  transform: rotate(-45deg);
  border-width: 8px;
  box-shadow: 2px -2px 3px 0px rgba(0, 0, 0, 0.15);
  content: " . ";
  position: absolute;
  width: 18px;
  height: 18px;
  color: white;
  background-color: white;
}

.login-overlay--content {
  font-size: 12px;
}

login-overlay.active {
  /*displays pop-up when "active" class is present*/
  visibility: visible;
  text-align: center;
}


/* Modal Content/Box */

modal-content {
  border: 1px solid #888;
}


/* The Close Button */

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

popup-overlay {
  /*Hides pop-up when there is no "active" class*/
  visibility: hidden;
  position: absolute;
  background: #ffffff;
  border: 3px solid #666666;
  width: 50%;
  height: 50%;
  left: 25%;
}

popup-overlay.active {
  /*displays pop-up when "active" class is present*/
  visibility: visible;
  text-align: center;
}

popup-content {
  /*Hides pop-up content when there is no "active" class */
  visibility: hidden;
}

popup-content.active {
  /*Shows pop-up content when "active" class is present */
  visibility: visible;
}

<!-- ~~~~~ JQUERY CDN - JQUERY WON'T WORK WITHOUT THIS ~~~~~  -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <div class="login-overlay active"> <!-- ~~~~~ ADDED ACTIVE CLASS ~~~~~  -->
    <!-- Trigger the modal with a button -->
    <!-- NOTHING !!! -->
    <!-- the window is always shown when the page is opened -->


    <!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog">
      <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
          <div class="login-overlay--content">
            <div class="modal-header">
              <button type="button" class="close btn btn-default" data-dismiss="modal">&times;</button>
              <h3 class="modal-title">Willkommen auf dein-3d.com!!!</h3>
              <br>
              <p>Melde dich an, oder erstelle ein neues Konto, damit du:</p>
            </div>
            <div class="modal-body">
              <ul class="list">
                <li>
                  <i class="icon icon-checkmark-green"></i>
                  <span>Aktiv an der Community teilnehmen kannst</span>
                </li>
                <li>
                  <i class="icon icon-checkmark-green"></i>
                  <span>Produkte auf dem Marktplatz erwerben kannst</span>
                </li>
                <li>
                  <i class="icon icon-checkmark-green"></i>
                  <span>Für dich interessante Angebote siehst</span>
                </li>
              </ul>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default"><a href="/wp-login.php">Einloggen</button>
              <button type="button" class="btn btn-default"><a href="/wp-login.php?action=register">Registrieren</button>
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>

        </div>
      </div>
    </div>

  </div>
</div>