2

我正在使用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 位于覆盖 div 之外。

4

2 回答 2

1

首先，您参考的DEMO （我的demo）使用fancybox v2.0.6；从那以后情况发生了变化。

.fancybox-wrap其次， div 在内部或外部的事实.fancybox-overlay取决于助手覆盖状态：

默认值true如下：

helpers: {
    overlay : {
        locked: true
    }
}

...所以.fancybox-wrapdiv 将在div内部.fancybox-overlay。

另一方面，如果您false在自定义脚本中将该值设置为，则.fancybox-wrapdiv 将 位于div 之外.fancybox-overlay。

请注意，在第二种情况下（false），您将能够滚动fancybox 后面的页面。

使用 v2.1.5 的演示

于 2013-07-29T06:49:09.313 回答
0

在 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");
},

我正在使用 overlay locked: true和autoCenter: false来锁定背景并获得所需的定位。

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

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

这将打开所有 FancyBox，第一个和后续的，在页面下方任何点距视口顶部 20 像素。

于 2014-04-18T13:49:39.350 回答