CSS/HTMLポップアップが閉じない

Question

html、css、およびいくつかのjquery関数を使って手でポップアップを実装しようとしています。

私のロジック：最初のdivをクリックすると、そのサイズが大きくなり、キャンセルボタンが表示され、それが機能します。うまくいかないのは、削除ボタンをクリックしてポップアップを閉じることです。

私の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> 

マイスクリプト：

$(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"); 
     }) 
    }) 

マイ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; 
} 

編集：私はポップアップdiv要素は、その初期サイズに戻りたいですこれに言及するのを忘れてしまった。

おかげで、あなたはボタンのCSSを変更している マーカス

Answer 1

ボタンをクリックすると、おそらく、それはまた、（'.google-maps-div'に取り付けられている）他のクリックイベントハンドラをトリガので、何が起こるかはそのポップアップ近くにあり、すぐに再オープンします。

e.stopPropagation();を試してください。この

$(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(); 
     }) 
    }) 

枚このDEMO

Answer 2

自体が非表示にするには、コードの下

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

使用

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

Answer 3

は、いくつかの時間後に新しいCSSクラストグルを適用するポップアップ以下のように。

$('.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);   

    })