jquery - CSS/HTML popup won't close -
i trying implement popup hand using html, css , jquery functions.
my logic: when click initial div want increase size , make visible cancel button, works. not work close popup clicking remove button.
my 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>
my scripts:
$(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"); }) })
my 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; }
edit: want popup div go initial size, forgot mention this.
thanks, marcus
probably when clicking button trigger other click event handler ( attached '.google-maps-div'
), happens popup close , reopen immediately.
try using e.stoppropagation();
prevent behaviour. this
$(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(); }) })
see demo
Comments
Post a Comment