サイトで Colorbox (ポップアップ ウィンドウ用の js ライブラリ) を使用しています。一部のページでは、カラーボックスおよび/またはそのパーツに異なる外観を使用する必要があります (クローズ ボックスのように、別の png ファイルを使用します)。
js ライブラリはポップアップ div のコードをオンザフライで生成するため、コードを複製することなく、サイトのさまざまなページのさまざまな「外観」を処理する最も効率的な方法は何ですか?
その場で HTML を生成しますが、他のすべてのものと同じ CSS を使用します。そのため、デフォルト スタイルを上書きする必要な css を含む必要なページ<style>
タグを追加するか、いくつかの css ファイルを準備し、デフォルト スタイルを上書きする css ルールを使用して、必要なときにページに添付します。
考えられることの1つは、カラーボックス自体にCSSを持たないことですが、代わりにポップアップのコンテンツを独自のページに配置し、ajaxを介して呼び出します。特定のポップアップのすべてのCSSを独自のページに表示します。私は以前にこの方法を使用しました。カラーボックスファイルに必要なCSSは、背景色/透明度/画像のみです。
そのために別のCSSファイルが必要になるとは思いません..
あなたのカラーボックスが最初のページにあるとしましょう
<div class="divA">
// Color Box 1
</div>
<div class="divB">
// Color BoX 1
</div>
colorBox クラスの前にこのクラスを追加して、作業を完了することができます。
.divA colorbox-class
{
// Your Style Color Box 1
}
.divB colorbox-class
{
// Your Style Color Box 2
}
などのファイルにスタイルを追加するよりも、 andなどのファイル名と同じものを付け<body>
てはどうでしょうか。id
<body id="index">
<body id="about_us">
colorbox.css
body#index wrapper gallery
{
background-color: #foo;
}
私はスリムボックスを使用し、上記のようにします。