Всплывающее окно не закрывается

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>

Я интегрировал код css на codepen.io ... в то время как мой пост - это в основном код ....

всплывающее окно всегда отображается при открытии страницы. Так что только для тех, кто не зарегистрирован. Я смогу установить этот l oop позже.

Большинство обучающих программ, которые я нахожу, относятся к кнопке для открытия и закрытия всплывающего окна .. но для меня она открыта постоянно и должна "только "быть закрытым.

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