彈出窗口不會關閉

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>