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

问题

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>

$(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!

回答1:

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>

回答2:

This is how you can disable vertical dragging:

$('[data-fancybox="images"]').fancybox({
  touch: {
    vertical: false
  }
});

Demo - https://codepen.io/anon/pen/bYEQmM

来源：https://stackoverflow.com/questions/47091462/fancybox-3-prevent-moblie-view-swipe-up-or-click-overlay-area-close

标签

jquery

css

fancybox-3