3

我正在尝试制作一个只能通过关闭按钮关闭的花式框。我查看了 fancyBox3 文档，但仍然不知道。fancybox 默认设置只能防止鼠标点击外关闭和鼠标触摸关闭。即使触摸设置设置为假，向上滑动或单击覆盖区域关闭问题仍然会在移动视图上发生。

我有一个示例脚本来显示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

有什么办法可以防止手机近距离滑动吗？谢谢！

4

3 回答 3

2

尝试这个。给"touch":false而不是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>

于 2017-11-03T09:14:30.090 回答
1

这是禁用垂直拖动的方法：

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

演示 - https://codepen.io/anon/pen/bYEQmM

于 2017-11-03T09:34:55.763 回答
0

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

于 2022-02-07T14:27:27.680 回答