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

【问题标题】：Opening another fancybox on a page after closing the previous one关闭前一个后在页面上打开另一个fancybox
【发布时间】：2013-07-29 06:12:28
【问题描述】：

我使用的是 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 之外。

【问题讨论】：

我是否需要运行 $.fancybox.close();在打开下一个花式盒子之前？
你不需要运行$.fancybox.close();来打开第二个，因为第一个会自动关闭。

标签： jquery fancybox fancybox-2

【解决方案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

【讨论】：

不幸的是，如果您从第一个 fancybox jsfiddle.net/ZbJsJ/11 中打开另一个 fancybox，这将不起作用。我有 2 个模态框 1 和 2。当我打开 modal1 并锁定覆盖：true 时，背景保持固定。但是，如果我从 modal1 内部打开 modal2，则背景现在会滚动。 modal1 和 modal2 都有相同的 fancybox 定义。为什么modal2打开时页面会滚动？此外，当 modal2 打开时，.wrap div 位于覆盖 div 之外，即使定义已锁定覆盖：true
@Neil ：恐怕我的朋友你刚刚发现了一个错误。我打开了issue #672

【解决方案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");
},

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

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

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

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

【讨论】：