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?

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

cool_dev

<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.

Gabriel

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

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

Mandeep Singh Bhangu

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

atwede

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.

T.Todua

Set the closeClick parameter to false inside your function:

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

    return false;
});

Raj Gohil

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

Parul

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;

来源：https://stackoverflow.com/questions/1363806/jquery-fancybox-prevent-close-on-click-outside-of-fancybox

标签

javascript

jquery

modal-dialog

fancybox