jquery - 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;
 }

编辑:我想让popup div恢复到初始大小，忘记说了。

谢谢，马库斯

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