Fancybox 3 - 防止移动设备视图向上滑动或点击覆盖区域关闭

Question

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

我有一个展示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

- jkythc

---

你所说的“mobile drag up”具体是什么意思？你是指向上滑动的手势还是类似于那样的动作？ - CBroe

@CBroe 是的，您可以使用手机查看jsfiddle链接，并尝试向上滑动覆盖区域，即使“touch”选项设置为false，fancybox也会关闭。 - jkythc

“touch”选项似乎控制您是否可以仅通过滑动导航到上一个/下一个项目，但不影响关闭行为。我猜您可以尝试捕获向上滑动引起的事件，并在fancybox提供的“beforeClose”处理程序中取消它。不确定的是，在其中关闭它的事件信息是否可用；如果没有，您可能需要使用自己的事件处理程序来捕获它，然后设置一个标志或其他东西，您可以在beforeClose中检查该标志。还可能需要基于计时器重新设置该标志... - CBroe

为什么社区在没有检查答案的情况下就给出负评呢？我的答案是正确的。 - ankita patel

@jkythc，请检查我的答案。 - ankita patel

Answer 1

尝试这个。将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>

- ankita patel

---

也许我的问题没有表达清楚，我的意思是向上滑动覆盖的黑色区域仍然可以关闭弹出窗口。 - jkythc

在你的fiddle中，当我向上滑动时关闭弹出窗口，在我的fiddle中，没有点击关闭按钮，弹出窗口不会关闭，我想你是想要这样。 - ankita patel

Answer 2

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

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

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

- Janis

---

这是一个漫长的故事，但以下是如何使其工作- https://jsfiddle.net/0Lg41w6s/ - Janis

顺便说一下，我已经更新了第一个演示，在 v3.2 中可以运行。 - Janis

@Janis，你能否提供更多关于如何解决这个问题的信息吗？我也遇到了同样的问题，在Android设备上查看使用Fancybox显示的内容时会自动关闭。我无法将触摸垂直设置为false，因为内容需要滚动，但当我滚动时，它就会关闭！ 先行致谢。 - Frank Furter

Answer 3

我遇到了这个问题，你需要为移动设备添加选项。

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

这段代码在fancy v.3.5.7上百分之百有效。

- Hackuchino