Question

我正在测试一些代码，这些代码最终会是一个半透明背景的模态弹出窗口。问题是我想通过单击背景而不仅仅是在弹出窗口中我将要关闭的关闭按钮来删除背景类.modal-overlay。我已经测试了两种方法来检查当我点击背景时是否发生了某些事情，但没有任何反应！我做错了什么或错过了什么？

jQuery的：

var appendthis =  ("<div class='modal-overlay modal-close'></div>");

$('#open-popup').click(function(e) {
    e.preventDefault();
    $("body").append(appendthis);
    $(".modal-overlay").fadeTo(500, 0.7);

});

$(".modal-overlay").on("click", function(){
    alert("Closing!?");
});

$(".modal-close, .modal-overlay").click(function() {
    alert("Closing?");
    $(".modal-overlay").fadeOut(500, function() {
        $(".modal-overlay").remove();
    });
});

CSS：

.modal-overlay {
    opacity: 0;
    filter: alpha(opacity=0);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 900;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7) !important;
}

Answer 1

上面代码的问题在于您正在为当时不存在的元素定义click事件处理程序。当您稍后创建它时，该元素没有附加点击处理程序。

您必须使用委派事件来实现您想要的目标（read more about it in the jQuery documentation）。这样，click事件处理程序将在创建时附加到元素：

$(document).on("click", "selector-for-element-created-later", function(e) { ... });

应用于您的代码就像这样（我将alert替换为confirm）：

var appendthis =  ("<div class='modal-overlay modal-close'></div>");

$('#open-popup').click(function(e) {
    e.preventDefault();
    $("body").append(appendthis);
    $(".modal-overlay").fadeTo(500, 0.7);
    
});

$(document).on("click", ".modal-close, .modal-overlay", function() {
    if (confirm("Closing?")) {
        $(".modal-overlay").fadeOut(500, function() {
            $(".modal-overlay").remove();
        });
    }
});

/* 
// or this

$(document).on("click", ".modal-overlay", function(){
    alert("Closing!?");
});
*/

.modal-overlay {
    opacity: 0;
    filter: alpha(opacity=0);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 900;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7) !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="open-popup">Open Popup</button>

尝试使用click事件删除模态背景

1 个答案: