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

Question

我有一个带有一些按钮的花式框，当您单击一个按钮时，它会打开一个新的花式框，当您关闭该框时，它 returns 您会回到原来的状态。然而，当它 returns 到原来的时候，叠加层消失了！ 如何防止这种情况发生？ 我正在使用 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 内的按钮（绑定到 fancybox）打开一个新的 fancybox（或从 fancybox 画廊中的一个项目导航到另一个项目），fancybox 会将其视为 transition 和 overlay.hide() 方法永远不会被触发。这就是为什么当您单击里面的 href="#modal2" 按钮时叠加层仍然可见的原因。

如果您不想使用 setTimeout() 解决方法，主要是因为 overlay flicks (closes/opens)，您可以 .off() fancybox close button and trigger a click on the href="#modal1" button 打开第一个 fancybox 作为过渡而不是 onClosed。这样，overlay.hide() 方法将不会被触发，叠加层将保持可见且过渡更平滑。

注意：此方法需要 bind fancybox 关闭按钮 恢复其在 onComplete 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 和解决方法

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

fancy-box sub-box losing overlay when returning to main box

css

jquery

fancybox