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能够恢复到初始大小，忘了提这个。

谢谢，马库斯

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

您正在更改按钮本身的CSS

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

    })

CSS / HTML弹出窗口不会关闭

3 个答案: