34

I am using jquery fancybox version 2.0.3. I want to prevent close on click outside of fancybox. I want to force user to click the cross button. I have tried

$(document).ready(function() {
    $(".various").fancybox({
        closeClick  : false,
        openEffect  : 'none',
        closeEffect : 'none',
        hideOnOverlayClick:false,
        hideOnContentClick:false
    }).trigger("click");
});

but this doesn't seems to work in new version of fancybox. I had referred the link

jquery fancybox - prevent close on click outside of fancybox

but these solutions doesn't seems to work in fancybox 2.0.3

5 Answers 5

86

Use this option:

helpers : { 
  overlay : {closeClick: false}
}

so your final script should look like:

$(document).ready(function() {
 $(".various").fancybox({
  closeClick  : false, // prevents closing when clicking INSIDE fancybox 
  openEffect  : 'none',
  closeEffect : 'none',
  helpers   : { 
   overlay : {closeClick: false} // prevents closing when clicking OUTSIDE fancybox 
  }
 }).trigger("click");
});

hideOnOverlayClick and hideOnContentClick are options for Fancybox v1.3.x

4
  • Script works nicely apart from it shows fancybox on document ready, not after I click the relevant button. Any ideas how to prevent that?
    – Pejs
    Commented Jan 4, 2015 at 16:09
  • @Pejs if you don't want the script just after the page load, then remove .trigger("click") from the code above
    – JFK
    Commented Jan 5, 2015 at 2:34
  • 2
    If you are using Fancybox 3, add clickSlide : false to your options array. Commented Mar 20, 2018 at 20:27
  • fancybox 3.3.1 just needs "clickSlide: false" to prevent closing on side click, just as Ryan Burney mentioned. Commented May 12, 2020 at 10:46
5

The OP asked about fancyBox 2.0, but if you came here looking for an answer and are using fancyBox 3.0+, you can simply do:

$('.various').fancybox({
    clickSlide: false, // disable close on outside click
    touch: false // disable close on swipe
});

You can also completely disable the close button by adding smallBtn and toolbar to the options array and setting both to false.

Tested with fancyBox 3.5.7.

0
$(document).ready(function() {
    $("#popup").fancybox({
        closeClick  : false,
        openEffect  : 'none',
        closeEffect : 'none',
        helpers   : { 
            overlay : {
                closeClick: false,
            }
        }
    }).trigger("click");
});
1
  • Hi Deepak, Thanks for your first answer on stackoverflow. If possible please do explain why an answer works in order to help the community learn more :) Happy programming... Sam (reviewer)
    – saml
    Commented Jul 9, 2016 at 14:09
0

Using solution from Vennik - jsfiddle.net/5EV8r/425 .

If you want to prevent click outside.

Use it for example:

$(".fancybox_pdf").fancybox({
      helpers : { 
      overlay : {closeClick: false}
      },
      autoSize: false,

        afterShow: function() {
            $(".fancybox-close").click(function(e) {
                e.preventDefault();
                last.click();
            });
        }
    });
0

$('.refer').fancybox({'width':395,'height':135,'type':'iframe',title:{type:'outside'},'closeBtn':false,helpers:{overlay:{closeClick:false} }})enter link description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.