jQuery 如何更改fancyBox v2 中的叠加颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9740443/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I change the overlay color in fancyBox v2
提问by Marius Ilie
In fancyBox version 1 there was the overlayColorparameter, but in version 2 it doesn't seem to work anymore.
在fancyBox 版本1 中有overlayColor参数，但在版本2 中它似乎不再起作用。
Editing the CSS doesn't work because it gets over-written by the JavaScript in the plugin.
编辑 CSS 不起作用，因为它被插件中的 JavaScript 覆盖。
Any ideas?
有任何想法吗？
回答by JFK
Fancybox v2.x API option are new and are not compatible with previous versions so overlayColorhas been replaced by the helpers=> overlay=> css=> background-coloroption.
Fancybox v2.x API 选项是新的，与以前的版本不兼容，因此overlayColor已被helpers=> overlay=> css=>background-color选项取代。
You don't have to messwith the original (js or css) files either as suggested by @Sparky672 (that is a bad practiceidea). You can set that option in your custom script ... so having this html for instance:
您不必像@Sparky672 所建议的那样弄乱原始（js 或 css）文件（这是一个糟糕的做法）。您可以在您的自定义脚本中设置该选项......因此有这个 html 例如：
<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
回答by Simon_Weaver
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.
Firefox（和 IE 9）不喜欢设置覆盖不透明度。Chrome 很好，但在 Firefox + IE9 中，不透明度应用于弹出窗口本身。他们似乎对叠加层和内容进行了不同的分层。
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 backgroundand not background-colorto override the default css.
如果您改为设置 RGBA 值，那么它将起作用。您必须使用background而不是background-color覆盖默认的 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.
请注意，插件本身使用半透明的 PNG 进行叠加。这很好，但有两个站点。首先它必须加载，除非你预先加载它，否则第一次打开弹出窗口时，淡入效果可能会有点卡顿。其次，大多数浏览器会在您提交表单后抑制请求 - 所以除非您预加载 PNG，否则根本不会有叠加层。
回答by P-S
回答by Andres Ilich
You can target the styletag that is applied to the #fancybox-overlaydiv by using an attribute selector, like so:
您可以使用属性选择器来定位style应用于#fancybox-overlaydiv的标签，如下所示：
CSS
CSS
#fancybox-overlay[style] {
background-color: blue !important;
}
回答by Sparky
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 overlayColoroption.
如果fancyBox v1 中没有内置选项，则内置在fancyBox v1 中的选项将不起作用。根据fancyBox v2 文档，没有这样的overlayColor选项。
My suggestion is to try and change the backgroundcolor within the jquery.fancybox.cssfile for #fancybox-overlay.
我的建议是尝试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 */
}
EDIT based on comments:
根据评论编辑：
The technically correct answer is: you can't set the overlayColoroption because the new version will not accept that obsolete parameter.
技术上正确的答案是： 您无法设置该overlayColor选项，因为新版本将不接受该过时参数。
However, if you're willing to edit the plugin, this should do it...
但是，如果您愿意编辑插件，则应该这样做...
around line 1308of jquery.fancybox.jsyou'll see the overlay options.
围绕行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');
回答by babyromeo
The css #fancybox-overlay seems not working for me (fb2), i use .fancybox-skin works perfectly.
css #fancybox-overlay 似乎对我不起作用（fb2），我使用 .fancybox-skin 效果很好。
.fancybox-skin{
background-color:#121212!important;
}
回答by drmartin
In last version the helper need the parent parameter, like this:
在最新版本中，助手需要父参数，如下所示：
$.fancybox.helpers.overlay.open({parent: $('body')});
回答by I_CaR
use css for bg:
将 css 用于 bg：
#fancy_bg
{
background-color:000000 !important;
}
回答by Fuller93
Today, this works. If you'd like no background color, set it to none;
今天，这有效。如果您不想要背景颜色，请将其设置为无；
.fancybox-bg {
background-color: #FF0004;
}
回答by alljamin
In the latest Fancybox 3 you are supposed to change overlay with CSS. See this Github issue comment.
在最新的 Fancybox 3 中，您应该使用 CSS 更改叠加层。请参阅此Github 问题评论。
This is how you can do it:
你可以这样做：
.fancybox-is-open {
.fancybox-bg {
opacity: 0.9;
background-color: #ffffff;
}
}
