在 Fancybox onClosed 事件上加载 Fancybox 中的新内容答案

【问题标题】：Load new content in Fancybox on Fancybox onClosed event在 Fancybox onClosed 事件上加载 Fancybox 中的新内容
【发布时间】：2011-10-17 21:41:25
【问题描述】：

我遇到了 Fancybox 窗口的问题。我使用fancybox 在我的页面上显示隐藏的div 的内容（下面的“.popup”fancybox）。在该内容中，有一个指向名为#exemple 的新fancybox 内容的链接。当我单击第一个 fancybox 中的链接时，它会加载第二个 fancybox 内容（iframe - 这很好用）。但是当用户点击第二个fancybox的关闭按钮时，我想回到第一个fancybox。

我尝试了“onClosed”事件，但它不起作用......

有没有办法做到这一点？

提前感谢您的帮助！

这是我使用的代码：

$("#exemple").fancybox({
    'width'             : '100%',
    'height'            : '100%',
    'titleShow'         : true,
    'titlePosition'     : 'over',
    'titleFormat'       : formatTitle,
    'autoScale'         : false,
    'centerOnScroll'    : true,
    'type'              : 'iframe',
    'onClosed'          : function() {
            alert('test');
            $(".popup").trigger('click');
        } 
});

$(".popup").fancybox({
    'autoScale'         : false,
    'centerOnScroll'    : true
});

// and here is the HTML code to trigger the hidden div:
<a style="font-weight: bold;" href=#data class=popup>our data</a>

//and the HTML code of the link inside the hidden div that gets displayed in the fancybox:
<a id=exemple title="xxx" href=xxx.php?id=xxx>link</a>

【问题讨论】：

你能做一个jsfiddle吗？

标签： javascript fancybox

【解决方案1】：

我正在处理同样的事情，但 onClosed 不起作用。经过大量研究后，我发现在旧版本的精美盒子中存在某种版本控制问题和 onClosed 作品。另一种对我有用的方法是使用 beforeClose 而不是 onClosed。

'beforeClose': function() { alert('test') },

这可能对某些读者有所帮助。

【讨论】：

这对我有用，+1，请注意，在复制和粘贴上述代码时，撇号会被复制为单引号，因此请重新键入撇号以避免 javascript 错误
你也可以使用'afterClose': function () {alert('test')}。我希望它会以同样的方式工作。

【解决方案2】：

如果您有一个 jsFiddle 可以使用，这会有所帮助，但首先尝试将 onClosed 函数代码包装在 setTimeout 中。零时间就足够了：

'onClosed' : function() {
    setTimeout(function(){
        $(".popup").trigger('click');
    }, 0);
}

【讨论】：

哇哦，它有效！非常感谢，你是个天才。如果我想更新 fancybox 内容而不是关闭然后重新打开它，解决方案是什么？
嗯？这真的有效吗？这背后的概念是什么？我现在认为它是一种黑客行为。
这不是真正的 hack... 这是一种变通方法。动画完成后调用清理函数。有一个 jquery bug 过早调用动画回调，解决它的方法是使用零时间的 setTimeout。
虽然这不是我想要的确切问题或确切答案，但这个 setTimeout 是一个很大很大的提示，我完成了一个让我死了两天的问题。非常感谢

【解决方案3】：

'onClosed'=> 'js:function() { alert("test") }',

注意：我们需要输入“js:”

我会自动调用fancybox（使用扩展）

对我来说很好用

【讨论】：