我对 Fancybox 有疑问答案

【问题标题】：I have issue with Fancybox我对 Fancybox 有疑问
【发布时间】：2017-02-22 06:00:39
【问题描述】：

我使用了 fancybox 的联系表格。并在页面加载时打开。所以我使用了以下代码。

jQuery.fancybox.open('#fancy');

我已经尝试过了，但是fancybox 在加载时无法打开。

jQuery("#fancy").fancybox({
        openEffect : 'fade',
        closeEffect : 'fade',
        padding: 0,
        helpers: {
            overlay: {
            locked: false
        }
    }

});

但是当我在fancybox外部点击它的关闭时，我只需要在关闭按钮上关闭。

【问题讨论】：

请问您使用的是版本 1 还是版本 2？
我使用的是版本 2

标签： fancybox fancyform

【解决方案1】：

尝试使用选项autoSize: true。它也会在移动视图上自动调整大小。

查看工作演示 Here

JS：

$(document).ready(function() {
  $("a.fancybox").fancybox({
  openEffect: 'fade',
  closeEffect: 'fade',
  autoSize: true,
  helpers: {
    overlay: {
      css: {
        cursor: 'auto'
      },
      closeClick: false
    }
  }
  }).trigger("click");
});

要修复滚动问题，请添加以下样式

CSS：

body .fancybox-wrap {
  position: fixed!important;
}

【讨论】：

【解决方案2】：

这种方式只会在关闭按钮上关闭

(function($){

var closeByButton = false;

$(("#fancy").fancybox({
    openEffect : 'fade',
    closeEffect : 'fade',
    padding: 0,
    beforeLoad : function() {
        closeByButton = false;
    },
    beforeClose: function() {
        if(!closeByButton){
            return false;
        }
    }
});

$(document).on('mouseenter','.fancybox-close', function(){
    closeByButton = true;
});

$(document).on('mouseleave','.fancybox-close', function(){
    closeByButton = false;
});

【讨论】：

请在手机屏幕上阅读赏金条件。