Search code examples
jqueryfancybox

How can I prevent anyone from closing fancybox 5 from outside the box


I have an ajax where the results are opened in a fancybox. I want to require the user to only be able to close the fancybox using my custom buttons (so I can attach additional functions) and be able to close the screen by clicking outside the box

In previous versions I was able to use closeClick: false or clickOutside: false

Alternatively, if I can get the fancybox to take up the full size of the browser that would also accomplish what I am looking to do (since there will not be anywhere to click outside the fancybox)

  $.ajax({
      type: "POST",
      url: actionUrl,
      data: form.serialize(), 
      success: function(data)
      {            
       new Fancybox(
          [
            {
              src: data,
              type: "html",
            },
          ],
          {
            closeButton:false,
            height:  "auto",
            width:  "100%",
            closeClick: false,                                
            }
        );
      }
  });

Solution

  • For v5, use option named backdropClick, see https://fancyapps.com/fancybox/api/options/#backdropclick

    Example:

    Fancybox.bind('[data-fancybox="gallery"]', {
      backdropClick: false
    });   
    

    https://jsfiddle.net/oa70qedn/