Question

在fancyBox版本1中有overlayColor参数，但在版本2中它似乎不再起作用。

编辑CSS不起作用，因为它被插件中的JavaScript覆盖了。

有什么想法吗？

Answer 1

Fancybox v2.x API选项是新的，与以前的版本不兼容，因此overlayColor已被helpers =＆gt;替换为overlay css =＆gt; background-color =＆gt; <a class="fancybox" href="images/01.jpg">open fancybox with a red overlay</a>选项。

根据@ Sparky672（这是一个糟糕的 ~~practice~~ 想法）的建议，你不必弄乱原始（js或css）文件。您可以在自定义脚本中设置该选项...例如，使用此html：

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

使用自定义脚本，如：

{{1}}

Answer 2

Firefox（和IE 9）不喜欢设置叠加不透明度。 Chrome很好用，但在Firefox + IE9中，不透明度应用于弹出窗口本身。它们似乎对叠加层和内容进行了不同的分层。

在 Fancybox 2.1.4

中进行测试

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

如果您设置RGBA值，那么它将起作用。您必须使用background而不是background-color来覆盖默认的css。

请注意，插件本身使用半透明PNG作为叠加层。这很好，但有两个缩减。首先它必须加载，除非你预先加载它，否则在你第一次打开弹出窗口时，淡入效果可能会有些结果。大多数浏览器在您提交表单后会抑制请求 - 所以除非您预先加载PNG，否则根本就没有叠加。

Answer 3

您可以使用属性选择器定位应用于style div的#fancybox-overlay标记，如下所示：

<强> CSS

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

Answer 4

来自Fancybox v1.3：

叠加选项默认值：

overlayOpacity：0.3
overlayColor：＃666

工作示例：

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

Answer 5

fancyBox v1中内置的选项如果没有内置到fancyBox2中，则无效。根据{{3}}，没有这样的overlayColor选项。

我的建议是尝试更改background jquery.fancybox.css文件中的#fancybox-overlay颜色。

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

Answer 6

css #fancybox-overlay似乎对我不起作用（fb2），我使用.fancybox-skin工作得很好。

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

Answer 7

在上一版本中，助手需要父参数，如下所示：

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

Answer 8

使用css for bg：

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

Answer 9

今天，这是有效的。如果您不喜欢背景颜色，请将其设置为无;

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

Answer 10

在最新的Fancybox 3中，您应该使用CSS更改叠加层。请参见此Github issue comment。

这是您可以执行的操作：

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

如何更改fancyBox v2中的叠加颜色

10 个答案:

来自Fancybox v1.3：