7

我在我的应用程序中使用 Fancybox。现在要处理关闭事件，我们编写如下内容：

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

如本文档页面所示：

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

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

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

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

4

4 回答 4

5

我不确定这是否是最好的解决方案，但我会选择 pub/sub 模式，所以在你的幻想箱中你应该做类似的事情。

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

然后，在您的代码中的某处：

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

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

如果你想根据每个fancybox制作不同的东西，上面的例子应该是要走的路。

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

编辑

你也可以编辑你的fancybox源来做到这一点（编辑1.3.4）只需添加$(window).trigger('fancyboxClosed');到953行左右。

于 2012-05-24T08:05:56.917 回答
5

尝试使用方法

beforeClose 或 afterClose

此代码工作正常

$(".fancybox").fancybox({beforeClose:function(){alert('blah');}}
于 2012-08-12T07:50:35.877 回答
2

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

  1. 单击关闭按钮（带有“fancybox-close”类的 div）
  2. 单击黑色背景（带有“fancybox-overlay”类的 div）
  3. 按下退出按钮（e.which = 27）

因此，您可以向 body 添加一个点击处理程序来检查 event.target 是 .fancybox-close 还是 .fancybox-overlay。还要在文档中添加一个 keydown 处理程序以侦听是否按下了转义键。

于 2012-05-24T08:07:25.000 回答
0

这是 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 元素选择器的覆盖和关闭按钮。

于 2013-08-06T06:45:02.467 回答