How to prevent default when clicking on Fancybox Overlay div?

Question

I want to keep Fancybox open when someone clicks outside of the content popup on the div with the id of "fancybox-overlay". In other words, I want nothing to happen when the user clicks outside the bounds of the popup. Any suggestions?

score 2 · Answer 1 · answered Sep 19 '12 at 10:19

If anyone wants to do this in the new fancybox it's slightly more complex, and more versatile.

Here you can see I set the close button to false so that it doesn't show up, then I set the overlay to not close on click and reset the pointer style.

$('.fancyLinks').fancybox({               
    closeBtn:false, 
    helpers : {
        overlay : {
            closeClick : false,
            css : {
                'cursor':'default'
            }
        }
    }
});

or you could just set it to "modal:true" and take care of both — JM4, Aug 16 '13 at 16:22

score 2 · Accepted Answer · edited May 23 '17 at 11:55

Should be just available in the API: http://fancybox.net/api

I see a few different hiding options, such as "hideOnOverlayClick". Pass the relevant options into the fancybox function as a map, and it should work as you want.

$('.fancyLinks').fancybox({
  'hideOnOverlayClick': false
});

Where .fancyLinks is just some selector I made up, put whatever your target selector is.

for the newer version of Fancy box. try this Fancybox v2 No Hide on Overlay Click - How?

How to prevent default when clicking on Fancybox Overlay div?

2 Answers2