Question

我有一个带有一些按钮的花式盒子，当你点击一个按钮时，它会打开一个新的花式盒子，当你关闭那个盒子时它会让你回到原来的状态。但是，当它返回原始状态时，叠加层会消失！ 如何防止这种情况发生？ 我正在使用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 />

JS

$(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）

Answer 1

嗯，这是对正在发生的事情的解释：

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

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

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

但是，请记住，如果您从打开的fancybox内的按钮（绑定到fancybox）打开一个新的fancybox（或者在fancybox图库中从一个项目导航到另一个项目），fancybox会将其视为转换，永远不会触发overlay.hide()方法。这就是当您点击里面的href="#modal2" 按钮时，叠加层仍然可见的原因。

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

注意：此方法需要overlay.hide() fancybox 关闭按钮返回bind onComplete回调中的原始功能1}}初始化脚本如：

href="#modal1"

查看您的调整 JSFIDDLE

注意：

$(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"); }) } }); });和.on()方法需要jQuery v1.7 +。
此解决方案适用于fancybox v1.3.4。
如果在fancybox v1.3.4中使用.off()内容，请注意 BUG 和解决方法

返回主框时，花式框子框丢失叠加

1 个答案: