Fancybox出现问题

Question

Fancybox出现问题

3

我已经使用了fancybox来创建一个联系表单，在页面加载时触发。因此，我使用了以下代码：

我已经在页面加载时使用以下代码打开 fancybox：

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

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

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

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

});

- Ajay patel

你在使用版本1还是2？ - Ivan Chaer

我正在使用第二个版本。 - Ajay patel

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jyoti Pathania · Answer 1

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

- Joca Baldini · Answer 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;
});