当叠加层设置为null时，关闭外部点击的fancybox [英] Close fancybox with outside click when overlay is set to null

问题描述

我使用了fancybox 2.1.4插件。

它运行得很好，但我有一个问题。

我想将叠加设置为null，

I am using the fancybox 2.1.4 plugin.
It works perfectly, but I have an issue.
I want to set the overlay to null and I want to close the fancybox when the user clicks outside(!) the fancybox container.

我尝试了下面的代码，但它不工作，因为没有重叠的点击

I have tried the following code, but it isn't working, since there's no overlay to click on.

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

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

So, how can I force fancybox to close, when I click outside of it?
Because, right now I must click on the close button to close it.

推荐答案

c $ c>在 afterShow 事件到 >回调强制关闭（和 unbind 它关闭后）....所以试试这个代码：

You could bind a click event to the fancybox parents (html,body) within the afterShow callback to force the closing (and unbind it after close) .... so try this code :

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

See JSFIDDLE

这篇关于当叠加层设置为null时，关闭外部点击的fancybox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！