Fancybox 3 - prevent moblie view swipe up or click overlay area close

user_4964262 0
Viewed 5865

I am trying to make a fancybox only can close by close button. I have looked the fancyBox3 documentation but still no idea. The fancybox default setting only can prevent mouse click outside close and mouse touch close. Even the touch setting set to false, swipe up or click overlay area close problem still happen on mobile view.

I have a sample script to show the fancybox.

HTML

<div id="fancybox" style="display:none;">
  <img src="https://farm6.staticflickr.com/5519/9432166677_61aa7e7f90_m_d.jpg">
</div>

JS

$(document).ready(function() {
    $.fancybox.open({
    src: "#fancybox",
    type: "inline",
    clickSlide : 'false',
    clickOutside : 'false',
    touch: false            
  });
});

JSFIDDLE

Any idea to prevent mobile swipe up close? Thanks!

fancybox-3 css jquery
3 Answers

Try this. Give "touch":false instead of touch: false.

$(document).ready(function() {  
  $.fancybox.open({
    src: "#fancybox",
    type: "inline",
    clickSlide : 'false',
    clickOutside : 'false',
    "touch":false 
  });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.25/jquery.fancybox.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.25/jquery.fancybox.min.js"></script>

<div id="fancybox" style="display:none;">
  <img src="https://farm6.staticflickr.com/5519/9432166677_61aa7e7f90_m_d.jpg">
</div>

user_80243540
user_4865950

I had this problem, you need add options for mobile devices

    $.fancybox.open({
        src: '#order-popup-desktop',
        type: 'inline',
        mobile: {
            clickSlide: false,
            touch: false
        },
    });

This code 100% work for fancy v.3.5.7

user_177810100
Related