我想知道是否有人可以帮我解决这个问题。我本质上是想结合这个 "Change overlay color and opacity"有了这个"Launch fancyBox manually on page load" .
我目前的代码是..
$.fancybox.open([
{
height: 500,
width: 350,
content : '<a href="#"><img src="http://www.myimageurl.jpg"></a>',
},
], {
padding : 0
});
这似乎非常适合在页面加载时显示图像链接,但我不知道如何为 fancybox 图像“背后”的所有内容获取背景/颜色覆盖。有什么建议吗?
最佳答案
只需用逗号分隔每个 API 选项即可
$.fancybox.open([{
href: 'http://fancyapps.com/fancybox/demo/1_b.jpg',
title: '1st title'
}, {
href: 'http://fancyapps.com/fancybox/demo/2_b.jpg',
title: '2nd title'
}, {
href: 'http://fancyapps.com/fancybox/demo/3_b.jpg',
title: '3rd title'
}], {
padding: 0, //<== comma here
// then your overlay color option
helpers: {
overlay: {
css: {
'background': 'rgba(58, 42, 45, 0.95)'
}
}
} // <== if you want another option after this, don't forget the comma
});
参见 JSFIDDLE
编辑:
IE9 及以下版本不支持 CSS rgba()
,因此您可能需要设置后备选项,例如:
var bk = navigator.userAgent.match(/msie [6-9]/i) ? "rgb(58, 42, 45)" : "rgba(58, 42, 45, 0.95)";
如果浏览器是 IE9 或更低版本,上面的变量将使用 rgb()
回退颜色。然后只需在 helpers
选项中设置变量,例如:
helpers: {
overlay: {
css: {
'background': bk
}
}
}
参见 fork JSFIDDLE
关于jquery - 页面加载时的 Fancybox 叠加颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24002013/