web-dev-qa-db-ja.com

fancyBoxv2でオーバーレイの色を変更するにはどうすればよいですか

FancyBoxバージョン1にはoverlayColorパラメーターがありましたが、バージョン2では機能しなくなったようです。

CSSの編集は、プラグインのJavaScriptによって上書きされるため、機能しません。

何か案は？

jquerycssfancybox
6
Marius Ilie

Fancybox v2.x APIオプションは新しく、以前のバージョンと互換性がないため、overlayColorはhelpers => overlay => css =に置き換えられました> background-colorオプション。

あなた混乱する必要はありません @ Sparky672によって提案されているように、元の（jsまたはcss）ファイルを使用します（これは悪いことです） 練習 考え）。カスタムスクリプトでそのオプションを設定できます...たとえば、このhtmlを使用します。

<a class="fancybox" href="images/01.jpg">open fancybox with a red overlay</a>

次のようなカスタムスクリプトを使用します。

$(".fancybox").fancybox({
  helpers : { 
   overlay: {
    opacity: 0.8, // or the opacity you want 
    css: {'background-color': '#ff0000'} // or your preferred hex color value
   } // overlay 
  } // helpers
}); // fancybox
15
JFK

Firefox（およびIE 9）は、オーバーレイの不透明度を設定するのが好きではありません。Chromeは問題ありませんが、Firefox + IE9では不透明度がポップアップに適用されますオーバーレイとコンテンツのレイヤリングが異なるようです。

Fancybox 2.1.4でテスト済み

 helpers:
 {
       overlay:
       {
              css: { 'background': 'rgba(0, 0, 255, 0.5)' }
       }
 }

代わりにRGBA値を設定すると、機能します。デフォルトのcssをオーバーライドするには、background-colorではなくbackgroundを使用する必要があります。

プラグイン自体がオーバーレイに半透明のPNGを使用していることに注意してください。これは問題ありませんが、2つのダウンサイトがあります。まず、ロードする必要があります。プリロードしない限り、ポップアップを初めて開いたときにフェードイン効果が少し途切れる可能性があります。 2番目に多いブラウザは、フォームを送信した後のリクエストを抑制します。そのため、PNGをプリロードしない限り、オーバーレイはまったくありません。

5
Simon_Weaver

次のように、属性セレクターを使用して、#fancybox-overlaydivに適用されるstyleタグをターゲットにできます。

[〜＃〜] css [〜＃〜]

#fancybox-overlay[style] {
    background-color: blue !important;
}
2
Andres Ilich

Fancybox v1.3から：

オーバーレイオプションのデフォルト：

  • overlayOpacity：0.3
  • overlayColor：＃666

実例：

$(".fancybox").fancybox({
    overlayOpacity  : 0.8, // Set opacity to 0.8
    overlayColor    : "#000000" // Set color to Black
});
2
P-S

Css＃fancybox-overlayが機能していないようです（fb2）。fancybox-skinを使用すると完全に機能します。

.fancybox-skin{
background-color:#121212!important;
}
0
babyromeo

FancyBox v1に組み込まれているオプションは、fancyBox2に組み込まれていない場合は機能しません。そして fancyBox v2のドキュメントによると によると、そのようなoverlayColorオプションはありません。

私の提案は、jquery.fancybox.cssの#fancybox-overlayファイル内のbackgroundの色を変更してみることです。

#fancybox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    display: none;
    z-index: 1001;
    background: #000;  /* <<-- this one  */
}

コメントに基づいて編集：

技術的に正しい答えは次のとおりです。新しいバージョンはその廃止されたパラメータを受け入れないため、overlayColorオプションを設定できません。

ただし、プラグインを編集する場合は、これで十分です...

1308の行jquery.fancybox.jsの周りにオーバーレイオプションが表示されます。

opts = $.extend(true, {
    speedIn : 'fast',
    closeClick : true,
    opacity : 1,
    css : {
        background: 'black'  //  <-- this one
    }
}, opts);

this.overlay = $('<div id="fancybox-overlay"></div>').css(opts.css).appendTo('body');
0
Sparky

今日、これは機能します。背景色を使用しない場合は、[なし]に設定します。

.fancybox-bg {
   background-color: #FF0004;
}
0
Fuller93

最新のFancybox3では、CSSでオーバーレイを変更することになっています。これを参照してください Githubの問題コメント 。

これがあなたがそれをすることができる方法です：

.fancybox-is-open {
 .fancybox-bg {
  opacity: 0.9;
  background-color: #ffffff;
 }
}
0
alljamin

最後のバージョンでは、ヘルパーには次のような親パラメーターが必要です。

$.fancybox.helpers.overlay.open({parent: $('body')});
0
drmartin

bgにcssを使用します。

#fancy_bg
{
    background-color:000000 !important;
}
0
I_CaR