Fancybox 3-防止移动视图向上滑动或单击覆盖区域关闭 [英] Fancybox 3 - prevent moblie view swipe up or click overlay area close

问题描述

我正在尝试仅使fancybox可以通过关闭按钮关闭.我看过fancyBox3文档，但还是不知道. fancybox的默认设置仅可防止鼠标在关闭外部单击和鼠标触摸关闭.即使将触摸设置设置为false，向上滑动或单击覆盖区域关闭，在移动视图上仍然会发生问题.

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.

我有一个示例脚本来显示fancybox.

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!

推荐答案

尝试一下.给出"touch":false而不是touch: false.

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>

这篇关于Fancybox 3-防止移动视图向上滑动或单击覆盖区域关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！