Question

我在我的应用程序中使用Fancybox。现在要处理close事件，我们写了类似的东西：

$(".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").fancybox(
{   onClose:function(){
                $(window).trigger('fancyboxClosed');
            }
});

然后，代码中的某处：

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

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

如果你想根据每个花式盒制作不同的东西，上面的例子应该是你要去的方式。

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

修改

您也可以编辑您的fancybox来源（编辑1.3.4），只需将$(window).trigger('fancyboxClosed');添加到第953行附近。

Answer 2

尝试使用方法

beforeClose或afterClose

此代码可以正常使用

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

Answer 3

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

关闭按钮（div与类'fancybox-close'）
单击黑色背景（div与类'fancybox-overlay'）
转义按钮（e.which = 27）

因此，您可以向body添加一个点击处理程序，以检查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以外的版本，请使用dragonfly，firefly或其他方法仔细检查叠加和关闭按钮的fancybox元素选择器。

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

4 个答案: