Fancybox 3 JQuery：单击外部元素时关闭图库答案

【问题标题】：Fancybox 3 JQuery: Close gallery when click outside elementFancybox 3 JQuery：单击外部元素时关闭图库
【发布时间】：2017-08-30 07:42:20
【问题描述】：

当单击父元素或外部元素时，我无法让 Fancybox 3 退出。

Fancybox 3 选项文档 (http://fancyapps.com/fancybox/3/docs/#options) 声明如下：

// Interaction
// ===========

// Use options below to customize taken action when user clicks or double clicks on the fancyBox area,
// each option can be string or method that returns value.
//
// Possible values:
//   "close"           - close instance
//   "next"            - move to next gallery item
//   "nextOrClose"     - move to next gallery item or close if gallery has only one item
//   "toggleControls"  - show/hide controls
//   "zoom"            - zoom image (if loaded)
//   false             - do nothing

// Clicked on the content
clickContent : function( current, event ) {
    return current.type === 'image' ? 'zoom' : false;
},

// Clicked on the slide
clickSlide : 'close',

// Clicked on the background (backdrop) element
clickOutside : 'close',

以下是我的 JS 文件：

$("[data-fancybox]").fancybox({
    loop : true,
  toolbar : true,
  buttons : [
    'close'
  ],
  clickOutside : 'close',
});

我正在使用组选项来启用图库。

data-fancybox="group"

我已经尝试了一些方法，但似乎还无法让它发挥作用。非常感谢您的帮助，请保重。抱歉信息不全，我得走了。

【问题讨论】：

你能在问题中发布你的 HTML
fancyBox 在内容外点击时默认关闭。所以，它应该可以工作。此外，这个答案可能会澄清clickSlide 和clickOutside - github.com/fancyapps/fancybox/issues/1586 之间的区别

标签： javascript jquery fancybox fancybox-3

【解决方案1】：

很难理解问题（添加codepen）

如果你想 - 点击图片关闭画廊，这是代码（从“缩放”更改为“关闭”（Conditional (ternary) Operator））

// Clicked on the content
clickContent : function( current, event ) {
    return current.type === 'image' ? 'close' : false;
},

你也做错了。这是默认值：

clickOutside : 'close', /* i am default */

如果你这样写，例如：

clickOutside : 'toggleControls',

结果：现在，当您单击覆盖区域（黑色）时 - 显示/隐藏控件。

【讨论】：

【解决方案2】：

先对不起我的英语。我希望我说对了。我刚刚在图片库中遇到了类似的问题。我对交互选项的名称感到恼火。对我来说工作选项“clickSlide” 这样，您应该能够控制如果单击打开的幻灯片但在（图像-）内容之外会发生什么。您可以使用 false，而不是使用“toggleControls”。希望有帮助

 $("[data-fancybox]").fancybox({
            clickSlide: 'toggleControls'
        });

【讨论】：