jquery - 页面加载时的 Fancybox 叠加颜色

Question

我想知道是否有人可以帮我解决这个问题。我本质上是想结合这个 "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 图像“背后”的所有内容获取背景/颜色覆盖。有什么建议吗？

Answer 1

只需用逗号分隔每个 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