Close fancybox with outside click when overlay is set to 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
                        }
   });

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.

回答1:

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");
    }
});

See JSFIDDLE

回答2:

Your code must be like this:

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

These characters {-} are missing after the helpers name with a option inside. FancyBox has a example here: http://jsfiddle.net/PFVxK/

来源：https://stackoverflow.com/questions/16817046/close-fancybox-with-outside-click-when-overlay-is-set-to-null