jquery - 当覆盖设置为 null 时，通过外部单击关闭 fancybox

Question

我正在使用 fancybox 2.1.4 插件。
它工作得很好，但我有一个问题。
我想将覆盖层设置为 null，并且当用户单击 fancybox 容器外部(!)时关闭 fancybox。

我尝试了以下代码，但它不起作用，因为没有可供点击的叠加层。

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

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

Answer 1

您可以在 afterShow 回调中将 click 事件绑定(bind)到 fancybox 父项 (html,body) 以强制关闭(并且 取消绑定(bind)关闭后)...所以尝试这个代码:

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