jquery - 返回主框时花式框子框丢失覆盖

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);
    }
    });
});

fiddle :http://jsfiddle.net/e27mgovv/(点击modal1按钮，然后点击modal2按钮，然后关闭modal2)

Answer 1

好吧，这是对正在发生的事情的解释:

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

注意:如果您使用onClosed 回调，overlay.hide() 总是会被触发。

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

但是，请记住，如果您从打开的 fancybox 内的按钮(绑定(bind)到 fancybox)打开一个新的 fancybox(或从 fancybox 画廊中的一个元素导航到另一个元素)，fancybox 会将其视为 transition 和 overlay.hide() 方法永远不会被触发。这就是为什么当您单击其中的 href="#modal2" 按钮 时叠加层仍然可见。

如果您不想使用 setTimeout() 解决方法，主要是因为 overlay 闪烁(关闭/打开)，您可以 .off( ) fancybox close button 和 trigger click href="#modal1" < em>按钮 打开第一个 fancybox 作为转换而不是 onClosed。这样，overlay.hide() 方法就不会被触发，叠加层将保持可见，过渡更平滑。

注意:此方法需要在 onComplete 中绑定(bind) fancybox close button 回到其原始功能> href="#modal1" 初始化脚本的回调:

$(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 和解决方法