弹出窗口不会关闭

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

这里有几个问题：没有引用 jQuery 库你省略了一个.login-overlay.active类，没有设置默认.login-overlay值hidden为确保模式默认对用户可见，请将active类添加到元素的 html看起来你复制了一个例子，但不一定知道每个部分是如何工作的。我已经评论了下面的工作代码以指示进行了更改的位置。//appends an "active" class to .popup and .popup-content when the "Open" button is clicked$(".open").on("click", function() {&nbsp; $(".popup-overlay, .popup-content, .login-overlay").addClass("active");});//removes the "active" class to .popup and .popup-content when the "Close" button is clicked&nbsp;$(".close, .popup-overlay, .login-overlay").on("click", function() {&nbsp; $(".popup-overlay, .popup-content, .login-overlay").removeClass("active");});.login-overlay {&nbsp; /* DEFAULT HIDDEN - LIKE THE EXAMPLE */&nbsp; visibility: hidden;&nbsp; position: absolute;&nbsp; flex-direction: row;&nbsp; z-index: 1;&nbsp; position: absolute;&nbsp; top: 100px;&nbsp; right: 100px;&nbsp; background-color: white;&nbsp; width: 286px;&nbsp; height: 266px;&nbsp; padding: 20px;&nbsp; box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.3);&nbsp; .opacity: 0;&nbsp; animation-name: fadein;&nbsp; animation-duration: 3s;&nbsp; animation-fill-mode: forwards;}&nbsp; /* COPIED FROM EXAMPLE MODAL - LIKE THE EXAMPLE*/.login-overlay.active {&nbsp; /*displays pop-up when "active" class is present*/&nbsp; visibility: visible;}.login-overlay::before {&nbsp; top: -9px;&nbsp; left: 200px;&nbsp; content: " ";&nbsp; border-color: blue;&nbsp; transform: rotate(-45deg);&nbsp; border-width: 8px;&nbsp; box-shadow: 2px -2px 3px 0px rgba(0, 0, 0, 0.15);&nbsp; content: " . ";&nbsp; position: absolute;&nbsp; width: 18px;&nbsp; height: 18px;&nbsp; color: white;&nbsp; background-color: white;}.login-overlay--content {&nbsp; font-size: 12px;}login-overlay.active {&nbsp; /*displays pop-up when "active" class is present*/&nbsp; visibility: visible;&nbsp; text-align: center;}/* Modal Content/Box */modal-content {&nbsp; border: 1px solid #888;}/* The Close Button */.close {&nbsp; color: #aaa;&nbsp; float: right;&nbsp; font-size: 28px;&nbsp; font-weight: bold;}.close:hover,.close:focus {&nbsp; color: black;&nbsp; text-decoration: none;&nbsp; cursor: pointer;}popup-overlay {&nbsp; /*Hides pop-up when there is no "active" class*/&nbsp; visibility: hidden;&nbsp; position: absolute;&nbsp; background: #ffffff;&nbsp; border: 3px solid #666666;&nbsp; width: 50%;&nbsp; height: 50%;&nbsp; left: 25%;}popup-overlay.active {&nbsp; /*displays pop-up when "active" class is present*/&nbsp; visibility: visible;&nbsp; text-align: center;}popup-content {&nbsp; /*Hides pop-up content when there is no "active" class */&nbsp; visibility: hidden;}popup-content.active {&nbsp; /*Shows pop-up content when "active" class is present */&nbsp; visibility: visible;}<!-- ~~~~~ JQUERY CDN - JQUERY WON'T WORK WITHOUT THIS ~~~~~&nbsp; --><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="container">&nbsp; <div class="login-overlay active"> <!-- ~~~~~ ADDED ACTIVE CLASS ~~~~~&nbsp; -->&nbsp; &nbsp; <!-- Trigger the modal with a button -->&nbsp; &nbsp; <!-- NOTHING !!! -->&nbsp; &nbsp; <!-- the window is always shown when the page is opened -->&nbsp; &nbsp; <!-- Modal -->&nbsp; &nbsp; <div class="modal fade" id="myModal" role="dialog">&nbsp; &nbsp; &nbsp; <div class="modal-dialog">&nbsp; &nbsp; &nbsp; &nbsp; <!-- Modal content-->&nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-content">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="login-overlay--content">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-header">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button type="button" class="close btn btn-default" data-dismiss="modal">&times;</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3 class="modal-title">Willkommen auf dein-3d.com!!!</h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>Melde dich an, oder erstelle ein neues Konto, damit du:</p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-body">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul class="list">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i class="icon icon-checkmark-green"></i>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>Aktiv an der Community teilnehmen kannst</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i class="icon icon-checkmark-green"></i>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>Produkte auf dem Marktplatz erwerben kannst</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i class="icon icon-checkmark-green"></i>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>Für dich interessante Angebote siehst</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-footer">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button type="button" class="btn btn-default"><a href="/wp-login.php">Einloggen</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button type="button" class="btn btn-default"><a href="/wp-login.php?action=register">Registrieren</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div></div>