我如何全局处理fancybox的onClose事件？

Question

我正在应用程序中使用Fancybox。现在要处理关闭事件，我们编写类似以下内容的代码：

$(".fancybox").fancybox({onClose:function(){alert('blah');}}

在此文档页面上看到：

http://fancyapps.com/fancybox/#docs

但是，我想为所有fancybox编写通用且全局的东西，每次fancybox都可以运行。我怎么做？简而言之，我不想在每个fancybox上编写onClose的代码，也不希望它依赖于class，id（例如，在这种情况下为.fancybox）。我怎么做？我试图写：

$.fancybox({onClose:function(){alert('blah');}}

但是它不起作用，并且从文档看来，这是用于以编程方式打开的功能。

Answer 1

我不确定这是否是最好的解决方案，但是我会选择发布/订阅模式，因此，在您的花哨的框中，您应该执行类似的操作。

$( ".fancybox" ).fancybox( {
    onClose: function () {
        $( window ).trigger( 'fancyboxClosed' );
    }
} );

然后，在代码中的某个位置：

$( window ).on( 'fancyboxClosed', function () {
    // Your global function for fancybox closed
} );

我对您的用途不太了解，但是请记住，您始终可以传递一个命名函数而不是一个匿名函数，因此您始终会触发相同的函数。

上面的示例应该是您想根据每个fancybox做不同的事情的方法。

此外，您可以将事件附加到所需的任何对象。只是为了方便起见使用的窗口。

编辑

您还可以编辑fancybox源来执行此操作（编辑1.3.4），只需在第953行附近添加$(window).trigger('fancyboxClosed');。

Answer 2

尝试使用方法

beforeClose或afterClose

此代码可以正常工作

$(".fancybox").fancybox({beforeClose:function(){alert('blah');}}

Answer 3

据我所知，Fancybox没有为此提供任何API。您可以改用hack。灯箱在以下情况下关闭：

1. 单击关闭按钮（类'fancybox-close'的div）
2. 单击黑色背景（类为'fancybox-overlay'的div）
3. 按下退出键（例如= 27）

因此，您可以向主体添加点击处理程序，以检查event.target是.fancybox-close还是.fancybox-overlay。如果按下了转义键，还可以向文档添加一个keydown处理程序以进行监听。

Answer 4

这里是1.3.4的不错的解决方案

$(document).delegate('#fancybox-close,#fancybox-overlay','click',function(){
    FancyBoxClosed(); 
});
$(document).keyup(function(e){
    if(e.keyCode == 27){
        if($('#fancybox-overlay').css('display') != 'none')
            FancyBoxClosed();
    }
});

function FancyBoxClosed()
{
    //global callback for fancybox closed
}

对于1.3.4以外的版本，请使用蜻蜓，萤火虫或其他工具仔细检查fancybox元素选择器的叠加和关闭按钮。