fancybox - 我对 Fancybox 有疑问

Question

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

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

我已经尝试过这个，但是fancybox在加载时没有打开。

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

});

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

Answer 1

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

(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;
});

Answer 2

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

在此处查看工作演示

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;
}