当叠加层设置为空时，通过外部点击关闭fancybox答案

【问题标题】：Close fancybox with outside click when overlay is set to null当叠加层设置为空时，通过外部点击关闭fancybox
【发布时间】：2013-05-29 14:46:36
【问题描述】：

我正在使用 fancybox 2.1.4 插件。
它工作得很好，但我有一个问题。
我想将叠加层设置为 null，并且我想在用户点击外部（！）fancybox 容器时关闭fancybox。

我已经尝试了以下代码，但它不起作用，因为没有可以点击的覆盖。

   $(".fancy_gallery").fancybox.({
                loop:false, 
                padding:0, 
                helpers:{
                        overlay:null, 
                        closeClick:true
                        }
   });

那么，当我点击它的外部时，如何强制关闭fancybox？
因为，现在我必须点击关闭按钮才能关闭它。

【问题讨论】：

也许使用焦点处理程序
有同样的问题，但无法用 JFK 的答案解决这个问题:(

标签： jquery click overlay fancybox-2

【解决方案1】：

您可以在afterShow 回调中将click 事件绑定到fancybox 父级(html,body) 以强制关闭（以及在关闭后unbind）...所以试试这段代码：

var fancyParent;
$(".fancy_gallery").fancybox({
    loop: false,
    padding: 0,
    helpers: {
        overlay: null
        // closeClick: true // useless without an overlay
    },
    afterShow: function () {
        fancyParent = $(".fancybox-wrap").parents(); // normally html and body
        fancyParent.on("click", function () {
            $.fancybox.close();
        });
        $(".fancybox-wrap").on("click", function (event) {
            // prevents closing when clicking inside the fancybox wrap
            event.stopPropagation();
        });
    },
    afterClose: function () {
        fancyParent.unbind("click");
    }
});

见JSFIDDLE

【讨论】：

这就像一个魅力！谢谢！不幸的是，我没有足够的声望来投票，但是当我有足够的积分来投票时，我会回来的。 +1

【解决方案2】：

你的代码必须是这样的：

helpers:  {
    title : {
        type : 'inside'
    },
    overlay : {
        showEarly : false
    }
}

这些字符 {-} 在带有选项的助手名称之后丢失。 FancyBox 有一个例子：http://jsfiddle.net/PFVxK/

【讨论】：

我认为你没有理解这个问题。
这没有回答问题，也没有帮助我与 Fancybox 有同样的问题。