Question

我正在使用fancybox在网站上显示我的几个链接 - 设计师想要不透明的背景，我已经成功地设法改变了背景的颜色。

我现在的问题是：我可以改变链接之间的颜色吗？

例如 - 由'show'链接触发的框后面的屏幕是灰色的，而其他两个链接，'music'和'video'是鲑鱼粉色。

这是我的剧本：

$(".fancybox").fancybox({
    helpers: {
        overlay: {
            css: {
                'background': 'rgba(246, 150, 121, 1)'
            }
        }
    }
});

和我的链接：

<li><a href="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/users/7725554&amp;color=a8a8a8&amp;auto_play=false&amp;hide_related=false&amp;show_artwork=true" class="fancybox fancybox.iframe"><u>Music</u></a></li>            
    <li><a href="shows.html" class="fancybox fancybox.iframe"><u>Shows</u></a></li>
    <li><a href="http://player.vimeo.com/video/65943302" class="fancybox fancybox.iframe"><u>Golden Hour</u></a></li>

有什么建议吗？有没有办法在我看不到的脚本中使用if / else循环？

提前感谢您的帮助！

Answer 1

您可以使用（HTML5）data-*属性为每个链接传递（ rgba ）颜色，如：

<a data-color="246, 150, 121, 1" class="fancybox fancybox.iframe" href="{link}">show</a>

<a data-color="209, 209, 209, 1" class="fancybox fancybox.iframe" href="{link}">golden hour</a>

然后在beforeShow回调中获取颜色，并使用 $.extend() 方法将其传递给helpers，如下所示：

jQuery(document).ready(function ($) {
    $(".fancybox").fancybox({
        beforeShow: function () {
            var _color = "rgba(" + $(this.element).data("color") + ")";
            $.extend(this, {
                helpers: { overlay: { css: { background: _color } } }
            });
        }
    });
}); // ready

<强> JSFIDDLE

使用fancybox-2的多种背景颜色

1 个答案: