Question

单击父元素或外部元素时，我无法退出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"

我尝试了一些东西，似乎无法让它工作。非常感谢帮助，保重。抱歉，由于缺乏信息，我不得不离开。

Answer 1

很难理解问题（添加代码集）

如果您需要 - 点击图片关闭图库，这就是代码（从“缩放”更改为“关闭”（Conditional (ternary) Operator））

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

你也在做错误的实施。这是默认值：

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

如果你这样写：

clickOutside : 'toggleControls',

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

Answer 2

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

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

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

2 个答案: