jquery fancybox - prevent close on click outside of fancybox

Question

I\'m using the Fancybox plugin for my modal windows. It seems like no matter what options I use I can\'t prevent the fancybox modal window from closing when the user clicks

Answer 1

none of the above worked for me, so i just wrote a simple bit for latest version of fancybox.

function load(parameters) {
    $('.fancybox-outer').after('<a href="javascript:;" onclick="javascript:{parent.$.fancybox.close();}" class="fancybox-item fancybox-close" title="Close"></a>');
}

$(document).ready(function () {
    $(".various").fancybox({ 
        modal: true,
        afterLoad: load
    });
});

Hope this helps :)

Answer 2

The $("#fancybox-overlay").unbind() solution given for this question by @Gabriel works except I needed to bind it to the fancybox after it loads its content, and I couldn't unbind immediately. For anyone who runs into this issue, the following code solved the problem for me:

$('.fancybox').fancybox({'afterLoad' : function() {
    setTimeout(function() { $("#fancybox-overlay").unbind(); }, 400);}
});

The 400ms delay got it working for me. It worked with 300ms but I didn't want to take chances.

Answer 3

I'm using fancybox 1.3.1, if you wanna force the user to close the modal box ONLY by clicking on the button, you can specify in the configuration:

<script type="text/javascript">
  $(document).ready(function() {
    $("#your_link").fancybox({
      'hideOnOverlayClick':false,
      'hideOnContentClick':false
    });
  });
</script>

Answer 4

I had to use a combination of all of the above answers, as all of them include errors. Certainly, no editing of the source code is necessary.

In my case, I wanted to disable overlay clicks closing the box as I had a progression of questions that would be displayed sequentially inside the fancybox, so I didn't want users to lose their progress by accidentally clicking on the overlay, but wanted to keep that functionality elsewhere on the page.

Use this to disable it:

$(".fancybox-overlay").unbind();

Use this to re-enable it:

$(".fancybox-overlay").bind("click", $.fancybox.close);

Answer 5

You can set the default closeClick on the overlay to false. Has worked for me in version 2.1.5.

$.fancybox.helpers.overlay.defaults.closeClick=false;

Answer 6

   jQuery(".lightbox").fancybox({
        helpers     : {
            overlay : {
                speedIn  : 0,
                speedOut : 300,
                opacity  : 0.8,
                css      : {
                    cursor : 'default'
                },
                closeClick: false
            }
        },
    });