jquery fancybox - prevent close on click outside of fancybox

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 outside of the fancybox modal window (grayed out area).

Is there a way to force the user to click the X or a button that I trigger the close event? This seems like it should be simple so I'm hoping I'm just reading the examples wrong.

I've tried hideOnContentClick: false but that doesn't seem to be working for me. Any ideas?

Answers


There is no option for that. You will have to change the source code.

In jquery.fancybox-1.2.1.js you need to comment out (or delete) line 341 in the _finish method:

//$("#fancy_overlay, #fancy_close").bind("click", $.fn.fancybox.close);

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

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

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>

For this issue, please try this way

$("YourElement").fancybox({
 helpers: {
        overlay: { closeClick: false } //Disable click outside event
    }

Hope this helps.


If you are using Fancybox 1.2.6 (like I am on a project), I found out the option hideOnOverlayClick. You can set it to false (e.g. hideOnOverlayClick: false).

I found this option while exploring to modify the code based on the suggestion givn by Scott Dowding.


I ran into the same "issue". This worked for me:

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

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 :)


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.


Set the closeClick parameter to false inside your function:

$(".video").click(function() {
    $.fancybox({
        width: 640,
        height: 385,
        helpers: { 
            overlay: {
                closeClick: false
            }
        }
    });

    return false;
});

Just add following line to your function, you do not have to change anything in jquery.fancybox-1.2.6.js

callbackOnStart : function() {$("#fancy_overlay").bind("click","null");},

you can prevent the fancy box to close by applying these setting

 'showCloseButton'=>false, // hide close button from fancybox
 'hideOnOverlayClick'=>false, // outside of fancybox click disabled
 'enableEscapeButton'=>false, // disable close on escape key press

get the fancybox setting from following link

http://www.fancybox.net/api


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

Just use the following code:

$(document).ready(function() {
  $("a#Mypopup").fancybox({
        "hideOnOverlayClick" : false, // prevents closing clicking OUTSIE fancybox
        "hideOnContentClick" : false, // prevents closing clicking INSIDE fancybox
        "enableEscapeButton" : false  // prevents closing pressing ESCAPE key
  });
  $("a#Mypopup").trigger('click');
});

<a id="Mypopup" href="images/popup.png"><img alt="Mypopup" src="images/popup.png" /></a>

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;

Need Your Help

How to do the pagination with XmlReader class c#

c# xml linq pagination xmlreader

At present i am fetching data from xml file using LINQ but the problem is i am using XDocument to load xml file but XDocument class load xml data into memory. so if there is 10,000 data in my xml f...

Importing chunks of CSV rows with Sidekiq, Resque, etc

ruby-on-rails postgresql sidekiq resque

I'm writing an importer that imports data from a CSV file into a DB table. To avoid loading the whole file into memory, I'm using Smarter CSV to parse the file into chunks of 100 to load each chunk...