Question

我正在使用fancybox 2.1.4插件它完美无缺，但我有一个问题我想将叠加层设置为null，我想在用户点击外部（！）fancybox容器时关闭fancybox。

我尝试了以下代码，但它无法正常工作，因为没有可以点击的叠加层。

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

那么，当我点击外面时，我怎么能强制fancybox关闭呢？因为，现在我必须点击关闭按钮才能关闭它。

Answer 1

您可以将click事件绑定到html,body回调中的fancybox父级（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/

当overlay设置为null时，使用外部单击关闭fancybox

2 个答案: