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

Question

在 fancyBox 版本 1 中，有

overlayColor

参数，但在版本 2 中，它似乎不再起作用了。

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

有什么想法吗？

Answer 1

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

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：

叠加选项默认值：

• 叠加不透明度：0.3
• 叠加颜色：#666

工作示例：

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

Answer 5

在最新的 Fancybox 3 中，您应该使用 CSS 更改覆盖。请参阅此Github问题评论。

您可以这样做：

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

Answer 6

fancyBox v1 中内置的选项如果未内置于 fancyBox2 中，则将不起作用。根据 fancyBox v2 文档，没有这样的

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 7

css #fancybox-overlay 似乎不适合我（fb2），我使用 .fancybox-skin 效果很好。

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

Answer 8

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

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

Answer 9

使用CSS作为背景：

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

Answer 10

今天，这有效了。如果您不想要背景颜色，请将其设置为无；

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