Question

我正在使用灯箱。如果我通过单击按钮关闭弹出窗口，它可以正常工作，但是如果我想通过单击内容容器外部来关闭它，它就不起作用。

在内容容器之外，我添加了另一个黑色不透明的容器。

这样，我在外部容器上添加了一个类。当内容容器上发生单击时，应将其删除。

var appendthis = ("the div container look over JsFiddle");

$('a[data-modal-id]').click(function (e) {
    $(window).resize();
    e.preventDefault();
    $("body").append(appendthis);
    $(".modal-overlay").fadeTo(500, 0.7);
    var modalBox = $(this).attr('data-modal-id');
    $('#' + modalBox).fadeIn($(this).data());
});

$(".js-modal-close, .modal-overlay").click(function () {
    $(".modal-box, .modal-overlay").fadeOut(500, function () {
        $(".modal-overlay").remove();
    });
});

JSFiddle：http://jsfiddle.net/Ljmxj8ue/

编辑19.11.15：问题：单击关闭容器外部的关闭不要在按钮单击时停止Youtube视频并导致此错误：“无法读取未定义的属性'stopVideo'”。 JsFiddle：http://jsfiddle.net/4f5dksj5/5/

Answer 1

移动此代码（并添加第一行）：

$(".js-modal-close, .modal-overlay").unbind('click'); // Prevents multiple bindings
$(".js-modal-close, .modal-overlay").click(function() {
  $(".modal-box, .modal-overlay").fadeOut(500, function() {
    $(".modal-overlay").remove();
  });
});

在$('a[data-modal-id]').click的末尾。它之前没有运行，因为当您分配$(".js-modal-close, .modal-overlay").click时该元素不存在。

JSFiddle：http://jsfiddle.net/MrGarretto/97dns8u5/

Answer 2

问题在于您尝试将“click”事件分配给在调用时不存在的元素。

看到这个小提琴，我已经使用

为你解决了这个问题

http://jsfiddle.net/Ljmxj8ue/1/

$(document).on('click',".js-modal-close, .modal-overlay", function() {

而不是：

$(".js-modal-close, .modal-overlay").click(function () {

通过绑定文档上的点击 - 它会监听DOM上的任何点击并检查点击的元素是否有上面指定的类，如果是 - 它将触发函数。

为什么灯箱在内容容器外部单击时不关闭

2 个答案: