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

Question

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

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

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

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

Answer 1

您可以在回调中将一个事件绑定click到fancybox父母（html,body）afterShow以强制关闭（以及关闭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

Answer 2

您的代码必须是这样的：

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

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