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

Popular posts from this blog

Spring Boot + JPA + Hibernate: Unable to locate persister -

go - Golang: panic: runtime error: invalid memory address or nil pointer dereference using bufio.Scanner -

c - double free or corruption (fasttop) -