弹出窗口不会关闭

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>

Answer 1

这里有几个问题：

1. 没有引用 jQuery 库

2. 你省略了一个.login-overlay.active类，没有设置默认.login-overlay值hidden

3. 为确保模式默认对用户可见，请将active类添加到元素的 html

看起来你复制了一个例子，但不一定知道每个部分是如何工作的。我已经评论了下面的工作代码以指示进行了更改的位置。

//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 */

  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*/

.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>