CSS/HTML-Popup wird nicht geschlossen

Question

Ich versuche, ein Popup manuell mit HTML, CSS und einigen JQuery-Funktionen zu implementieren.

Meine Logik: Wenn ich auf das ursprüngliche div klicke, möchte ich es vergrößern und einen Cancel-Button sichtbar machen, was funktioniert. Was es nicht funktioniert, ist das Schließen des Popups durch Klicken auf die Schaltfläche Entfernen.

Mein html:

<div class="google-maps-div" id="popup"> 
    <div class="google-maps-remove-button" id="popup-button"> 
     <span class="glyphicon glyphicon-remove"></span> 
    </div> 
</div> 

Meine Skripte:

$(function() { 
     $(document).ready(function() { 
      $('.google-maps-div').click(function() { 
       $('#popup').removeClass('google-maps-div'); 
       $('#popup').addClass('google-maps-div-popup'); 
       $('.google-maps-remove-button').css("visibility", "visible"); 
      }) 
     }) 
    }) 



$(function() { 
     $('.google-maps-remove-button').click(function() { 
      console.log("Cancel clicked !"); 
      $('#popup').removeClass('google-maps-div-popup'); 
      $('#popup').addClass('google-maps-div'); 
      $('.google-maps-remove-button').css("visibility", "hidden"); 
     }) 
    }) 

Meine CSS:

.google-maps-div{ 
    position: fixed; 
    bottom: 0; 
    right: 0; 
    margin-right: 15px; 
    margin-bottom: 15px; 
    width: 250px; 
    height: 150px; 
    background-color: yellow; 
    border: 1px solid #000000; 
    border-radius: 7.5px 7.5px 7.5px 7.5px; 
} 

.google-maps-div-popup{ 
    position: fixed; 
    bottom: 10%; 
    top: 10%; 
    width: 80%; 
    left: 10%; 
    right: 10%; 
    height: 75%; 
    background-color: yellow; 
    border: 1px solid #000000; 
    border-radius: 7.5px 7.5px 7.5px 7.5px; 
} 

.google-maps-remove-button{ 
    position: relative; 
    top: 2.5%; 
    left: 97.5%; 
    visibility: hidden; 
} 

bearbeiten: Ich möchte das Popup-div auf seine ursprüngliche Größe zurück gehen , vergaß dies zu erwähnen.

Danke, Marcus

Answer 1

Wahrscheinlich, wenn die Schaltfläche klicken es auch den anderen Click-Ereignishandler auslösen (an '.google-maps-div'), so was passiert ist, dass Pop-up schließen und wieder öffnet sofort.

Verwenden Sie e.stopPropagation();, um dieses Verhalten zu verhindern. . Wie dies

$(function() { 
     $('.google-maps-remove-button').click(function (e) { 
      console.log("Cancel clicked !"); 
      $('#popup').addClass('google-maps-div'); 
      $('#popup').removeClass('google-maps-div-popup'); 
      $('.google-maps-remove-button').css("visibility", "hidden"); 
      e.stopPropagation(); 
     }) 
    }) 

dieses DEMO

Answer 2

Sie css der Schaltfläche selbst

$('.google-maps-remove-button').css("visibility", "hidden"); 

Verwenden Sie den folgenden Code zu verbergen Popup

$('#popup').hide(); 

Answer 3

Nehmen neue CSS und Klasse Toggle nach einiger Zeit verändern wie nachstehend.

$('.google-maps-remove-button').click(function() { 
     setTimeout(function() { 
      $('#popup').removeClass('google-maps-div-popup'); 
      $('#popup').addClass('google-maps-div'); 
      $('.google-maps-remove-button').css("visibility", "hidden"); 
     }, 100);   

    })