使用不同模板时,Fancybox关闭按钮不显示

时间:2012-10-17 22:59:12

标签: javascript css fancybox

我有一个页面,我需要为页面上的不同元素使用2种不同的FancyBox样式。为此,我相应地添加了tpl选项和修改后的样式表。这就是我所拥有的:

$(document).ready(function() {
$(".login").fancybox({
    closeClick  : false,
    closeBtn : true,
    tpl: {
        wrap     : '<div class="fancybox-wrap1" tabIndex="-1"><div class="fancybox-skin1"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>',
        closeBtn : '<a title="Close" class="fancybox-item fancybox-close" href="javascript:;"></a>'
        }
    });
});

在我的CSS中,我为.fancybox-wrap1和.fancybox-skin1添加了新样式。样式效果很好但是在FancyBox上修改了模板“关闭”按钮完全消失了!我尝试在closeBtn添加和删除tpl,但似乎没有任何区别。

我还有一个演示here(最终我需要为FancyBox提供不同的背景图像,而不仅仅是背景颜色,这就是我这样做的原因。)

我做错了什么?任何帮助将不胜感激!

1 个答案:

答案 0 :(得分:0)

您的.fancybox-skin1 div仍然需要应用fancybox-skin类。如果你看一下Fancybox代码版本2.1.2(有时这是没有详细记录的唯一解决问题的方法),你会看到它通过搜索该类找到了皮肤(第884行):

$.extend(coming, {
                skin  : $('.fancybox-skin',  coming.wrap),
                outer : $('.fancybox-outer', coming.wrap),
                inner : $('.fancybox-inner', coming.wrap)
            });

然后它使用该引用附加closeBtn(第1440行):

// Create a close button
            if (current.closeBtn) {
                $(current.tpl.closeBtn).appendTo(F.skin).bind('click.fb', F.close);
            }