Popup will not Close

user_11743751 0
Viewed 58

can anyone help me?

whatever I try the popup window can not be closed ...

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>

I integrated the css code on codepen.io...while my post is mostly code....

the popup window is always displayed when the page is opened. So only for those who are not registered. I will be able to install this loop afterwards.

Most of the tutorials I find relate to a button to open and close a pop-up .. but for me it is permanently open and should "only" be able to be closed.

   
<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>
jquery javascript
1 Answers

There are a couple of issues here:

  1. No reference to the jQuery library
  2. You omitted a .login-overlay.active class and did not set the default of .login-overlay to hidden
  3. To ensure the modal is visible to the user as default, add active class to the element's html

It looks like you copied an example without necessarily knowing how each part works. I've commented the working code below to indicate where changes were made.

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

user_29133060
Related