How can I change the overlay color in fancyBox v2

问题

In fancyBox version 1 there was the overlayColor parameter, but in version 2 it doesn't seem to work anymore.

Editing the CSS doesn't work because it gets over-written by the JavaScript in the plugin.

Any ideas?

回答1:

Fancybox v2.x API option are new and are not compatible with previous versions so overlayColor has been replaced by the helpers => overlay => css => background-color option.

You don't have to mess with the original (js or css) files either as suggested by @Sparky672 (that is a bad ~~practice~~ idea). You can set that option in your custom script ... so having this html for instance:

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

use a custom script like:

$(".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

回答2:

Firefox (and IE 9) don't like setting an overlay opacity. Chrome is fine with it but in Firefox + IE9 the opacity is applied to the popup itself. They seem to do layering differently for the overlay and contents.

Tested in Fancybox 2.1.4

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

If you set an RGBA value instead then it will work. You have to use background and not background-color to override the default css.

Note that the plugin itself uses a semi-transparent PNG for the overlay. This is fine, but has two downsites. Firstly it has to load and unless you pre-load it the fade-in effect can be a little stuttered the first time you open a popup. Second most browsers suppress requests after you've submitted a form - so unless you pre-load the PNG then there'll be no overlay at all.

回答3:

You can target the style tag that is applied to the #fancybox-overlay div by using an attribute selector, like so:

CSS

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

回答4:

From Fancybox v1.3:

Overlay Options Defaults:

overlayOpacity: 0.3
overlayColor: #666

Working Example:

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

回答5:

Options built into fancyBox v1 will not work if they're not built into fancyBox2. And according to the fancyBox v2 documentation, there's no such overlayColor option.

My suggestion is to try and change the background color within the jquery.fancybox.css file for #fancybox-overlay.

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

EDIT based on comments:

The technically correct answer is: you can't set the overlayColor option because the new version will not accept that obsolete parameter.

However, if you're willing to edit the plugin, this should do it...

around line 1308 of jquery.fancybox.js you'll see the overlay options.

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');

回答6:

The css #fancybox-overlay seems not working for me (fb2), i use .fancybox-skin works perfectly.

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

回答7:

In last version the helper need the parent parameter, like this:

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

回答8:

use css for bg:

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

回答9:

Today, this works. If you'd like no background color, set it to none;

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

来源：https://stackoverflow.com/questions/9740443/how-can-i-change-the-overlay-color-in-fancybox-v2

标签

jquery

css

fancybox