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

尝试使用选项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;
}

我有Fancybox的问题

2 个答案: