返回主框时花式框子框丢失覆盖答案

【问题标题】：fancy-box sub-box losing overlay when returning to main box返回主框时花式框子框丢失覆盖
【发布时间】：2015-03-14 02:57:41
【问题描述】：

我有一个带有一些按钮的花式框，当您单击一个按钮时，它会打开一个新的花式框，当您关闭该框时，它会返回原始框。然而，当它恢复到原来的时候，覆盖消失了！ 如何防止这种情况发生？ 我使用的是 fancybox 1.3.4

这是一个演示问题的示例：

HTML

<div style=display:none>
    <div id=modal1>
        Modal 1<br />
        <input type=button href=#modal2 value=modal2 />
    </div>
    <div id=modal2>
        modal 2
    </div>
</div>
<input type=button href=#modal1 value=modal1 />

$(document).ready(function () {
   $('input[href=#modal1]').fancybox();
    $('input[href=#modal2]').fancybox({
        onClosed:function() {
        setTimeout(function() {
        $.fancybox({href:'#modal1'});
    },0);
    }
    });
});

小提琴：http://jsfiddle.net/e27mgovv/ （点击modal1按钮，然后modal2按钮，然后关闭modal2）

【问题讨论】：

第二个模态显然破坏了覆盖，但是您需要的行为是不寻常的-从模态内部触发模态，我宁愿考虑更新模态本身的内容
嗯，我想我可以通过将所有“子模态”推入单个模态并使用 jquery 切换 div 来更新内容，这似乎可以工作
我会这样做 - 我见过的大多数模态插件，在创建之前检查覆盖的存在 - 这样你就不会得到多个。同样，它们只是在关闭一个模式时移除覆盖。
嗯，这并不完全理想，但我只是创建了自己的基本叠加层，并通过 start 和 close 方法控制它：jsfiddle.net/e27mgovv/38
@Luca 我的关闭重新打开计划不起作用，它从未重新打开主模式。我使用了您更新内容的最初建议，但将所有子模式放在一个花式框中，并根据需要切换每个模式的显示。谢谢！

标签： jquery css fancybox

【解决方案1】：

好吧，这里是对发生的事情的解释：

当您关闭 fancybox 时，叠加层会将其 CSS 设置从 display:block 更改为 display:none。这是在fancybox 脚本中由overlay.hide() 在fancybox 关闭时触发的。

注意：如果您使用onClosed 回调，则始终会触发overlay.hide()。

当你在onClosed 回调中打开一个新的fancybox 时，overlay.hide() 被触发，但似乎没有时间用新的盒子改回display:block，这就是为什么你必须使用setTimeout() 解决方法。

但是，请记住，如果您从一个打开的 fancybox 内的按钮（绑定到 fancybox）打开一个新的 fancybox（或者在 fancybox 库中从一个项目导航到另一个项目），fancybox 会将其视为过渡和overlay.hide() 方法永远不会被触发。这就是为什么当您单击其中的href="#modal2" 按钮时覆盖仍然可见的原因。

如果您不想使用setTimeout() 解决方法，主要是因为覆盖轻弹（关闭/打开），您可以.off()fancybox 关闭按钮 并触发href="#modal1" 上的click 按钮以打开第一个fancybox 作为过渡而不是onClosed。这样，overlay.hide() 方法将不会被触发，并且叠加层将保持可见，并且过渡更平滑。

注意：此方法将要求bindfancybox 关闭按钮在href="#modal1" 初始化脚本的onComplete 回调中恢复其原始功能，例如：

$(document).ready(function () {
    $('input[href=#modal1]').fancybox({
        onComplete: function () {
            $("#fancybox-close").off().on("click", function (event) {
                $.fancybox.close();
            })
        }
    });
    $('input[href=#modal2]').fancybox({
        onComplete: function () {
            $("#fancybox-close").off().on("click", function (event) {
                event.preventDefault();
                $('input[href=#modal1]').trigger("click");
            })
        }
    });
});

查看您的调整JSFIDDLE

注意事项：

.on() 和 .off() 方法需要 jQuery v1.7+。
此解决方案适用于 fancybox v1.3.4。
如果在fancybox v1.3.4 中使用inline 内容，请注意此BUG 和解决方法

【讨论】：