jquery fancybox 2.0.3 - prevent close on click outside of fancybox

Question

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

JFK · Accepted Answer · 2012-04-17T21:47:48.323

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

edited Apr 17 '12 at 21:47

answered Dec 06 '11 at 18:07

JFK

40,963
31
133
306

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 Jan 04 '15 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 Jan 05 '15 at 02:34
2

If you are using Fancybox 3, add `clickSlide : false` to your options array. – Ryan Burney Mar 20 '18 at 20:27
fancybox 3.3.1 just needs "clickSlide: false" to prevent closing on side click, just as Ryan Burney mentioned. – needfulthing May 12 '20 at 10:46

score 4 · Answer 2 · answered Oct 14 '20 at 18:33

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.

score 0 · Answer 3 · edited Jan 25 '17 at 14:45

0

$(document).ready(function() {
    $("#popup").fancybox({
        closeClick  : false,
        openEffect  : 'none',
        closeEffect : 'none',
        helpers   : { 
            overlay : {
                closeClick: false,
            }
        }
    }).trigger("click");
});

edited Jan 25 '17 at 14:45

Anto S

2,448
6
32
50

answered Jul 09 '16 at 13:28

Deepak Thakare

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 Jul 09 '16 at 14:09

score 0 · Answer 4 · answered Mar 31 '18 at 01:00

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

subash pandey · Answer 5 · 2021-07-20T14:01:20.453

0

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

edited Jul 20 '21 at 14:01

answered Jul 20 '21 at 13:55

subash pandey

57
4

jquery fancybox 2.0.3 - prevent close on click outside of fancybox

5 Answers5

Linked