Question

我在fancybox 2.1.5版上使用的是最新版本。当我打开fancybox时，我注意到 .fancybox-wrap div位于 .fancybox-overlay div内。如果我在同一页面上打开另一个fancybox，.fancybox-overlay div现在在.fancybox-wrap div之外和之上。

我对第一个和第二个fancybox的定义是相同的，如下所示：

$.fancybox({
    href        : '#my_div',
    autoSize    : true,
    fitToView   : false,
    padding     : 0,
    fixed       : true,
    autoCenter  : false,
    topRatio    : 0.5,
});

如果.fancybox-wrap div在.fancybox-overlay div内，我滚动页面，当fancybox内容大于窗口时，只有fancybox滚动后台内容保持静态

然而，当它在.fancybox-overlay之外时，我滚动fancybox及其后面的内容滚动。

如何阻止页面滚动。

当您检查此问题中的DEMO时，与fancybox网站上的演示相比，wrap div位于overlay div之外。

Answer 1

首先，你引用的DEMO（我的演示版）使用fancybox v2.0.6;事情发生了变化。

其次，.fancybox-wrap div位于.fancybox-overlay之内或之外的事实取决于帮助程序的重叠状态：

默认值为true，如：

helpers: {
    overlay : {
        locked: true
    }
}

...所以.fancybox-wrap div将 INSIDE .fancybox-overlay div。

另一方面，如果您在自定义脚本中将值设置为false，那么.fancybox-wrap div将 OUTSIDE .fancybox-overlay div。

注意在第二种情况下（false），您可以滚动fancybox后面的页面。

DEMO 使用v2.1.5

Answer 2

在GitHub上，FancyBox的作者建议尝试使用FancyBox 3 beta来查看问题是否已解决。我没有为黄金时间做好准备（在撰写此评论时），所以我通过以下方式解决了错误：

beforeShow : function() {
  // Move the wrap manually into overlay
  $(".fancybox-wrap").appendTo(".fancybox-overlay");

  // Add the missing classes to <html>
  $("html").addClass("fancybox-margin fancybox-lock");
},

我使用叠加锁定：true 和 autoCenter：false 来锁定背景并获得所需的定位。

最后，当打开页面下方ajax内容的FancyBox时，似乎FancyBox没有重置CSS top 值，而且我无法在回调中使用jQuery覆盖，所以我决定在FancyBox CSS中强制执行此操作：

.fancybox-opened {z-index: 8030; top: 20px !important;}

这将在页面的任何一点打开所有FancyBox，第一个和后续的，从视口顶部20px。

关闭前一个页面后，在页面上打开另一个fancybox

2 个答案: