jquery – fancy-box子框在返回主框时丢失叠加

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

解决方法

好吧,这是对正在发生的事情的解释：

当您关闭fancybox时,叠加层将其CSS设置从display：block更改为display：none.当fancybox关闭时,这将通过overlay.hide()在fancybox脚本中触发.

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

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

但是,请记住,如果您从打开的fancybox内的按钮(绑定到fancybox)打开一个新的fancybox(或在fancybox图库中从一个项目导航到另一个项目),fancybox会将此视为过渡和overlay.hide永远不会触发()方法.这就是当您单击其中的href =“#modal2”按钮时,叠加层仍然可见的原因.

如果您不想使用setTimeout()变通方法,主要是因为重叠轻弹(关闭/打开),您可以.off()fancybox关闭按钮并触发单击href =“#modal1”按钮打开第一个fancybox作为过渡而不是onClosed.这样,overlay.hide()方法将不会被触发,并且叠加将保持可见,并且过渡更平滑.

注意：此方法需要将fancybox关闭按钮绑定回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中使用内联内容,请注意此BUG和解决方法