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

divには、クラスを適用する.fancybox-skin1必要があります。fancybox-skinFancybox のコード バージョン 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 に答える