0

我有一个页面，我需要为页面上的不同元素使用 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但似乎没有任何区别。

我在这里也有一个演示（最终我需要为 FancyBox 提供不同的背景图像，而不仅仅是背景颜色，这就是我这样做的原因）。

我究竟做错了什么？任何帮助将不胜感激！

4

1 回答 1

0

您的.fancybox-skin1div 仍然需要将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);
            }
于 2012-10-18T00:12:01.867 回答