How can I change the overlay color in fancyBox v2

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

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.

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;
}