在移动设备上关闭 Fancybox 3

Question

在桌面上使用 fancybox，在内容外单击时关闭。在移动设备上使用它，只有当内容向上或向下滑动时它才会关闭（它不会对点击内容外部做出反应）。

是否可以（以及如何）在移动设备上通过单击内容外部来关闭 fancybox？

Answer 1

这个例子试一试：

$('[data-fancybox]').fancybox({
  clickContent : function( current, event ) {
    return current.type === 'image' ? 'zoom' : 'close';
  }
});

和这个 link 试试看： https://codepen.io/anon/pen/WEKmoB

Answer 2

fancyBox 针对移动设备有不同的 "click event"，您可以使用 "mobile" 选项自定义它们，例如：

mobile : {
    clickContent : "close",
    clickSlide : "close"
}

Answer 3

这是我使用 Fancybox 3.5.7 修改移动部分原始源代码的移动部分的解决方案：

mobile: {
                preventCaptionOverlap: !1,
                idleTime: !1,
                clickContent: function (t, e) {
                    return "image" === t.type && "close";
                },
                clickSlide: function (t, e) {
                    return "image" === t.type && "close";
                },

有人问上面的延迟。延迟发生在点击以了解是否会有双击。需要时间来查看是否再次点击，如果没有，则图像关闭。因此，如果您（如我的示例所示）删除双击功能（dblclickContent 和 dblclickSlide），这将消除延迟问题。

在移动设备上关闭 Fancybox 3

Closing Fancybox 3 on a mobile device

jquery

fancybox-3