Marcus Marcus - 4 months ago 14
CSS Question

CSS/HTML popup won't close

I am trying to implement a popup by hand using html, css and some jquery functions.

My logic: when I click the initial div I want it to increase its size and make visible a cancel button, which it works. What it does not work is to close the popup by clicking the 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: I want the popup div to go back to its initial size, forgot to mention this.

Thanks,
Marcus

Answer

Probably when clicking the button it also trigger the other click event handler ( attached to '.google-maps-div'), so what happens is that popup close and reopen immediately.

Try using e.stopPropagation(); to prevent that behaviour. Like 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 this DEMO