弹出窗口不会关闭

Question

谁能帮我？

无论我尝试什么弹出 window 都无法关闭...

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代码……而我的帖子主要是代码……

打开页面时始终显示弹出窗口 window。 所以只针对那些没有注册的人。 之后我将能够安装此循环。

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

   
<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 overlay.active class 并且没有将.login-overlay的默认值设置为hidden
3. 为确保模态默认对用户可见，请将active class 添加到元素的 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>