JQuery FancyBox叠加颜色

时间:2013-09-19 07:16:30

标签: javascript jquery html css fancybox-2

我试图让Fancybox iFrame自动加载并为叠加层添加不同的颜色。 到目前为止,在自动装载方面做得很好。

搞定了。 我无法改变的颜色。

现在我尝试了很多这里列出的例子。但我想我做错了。

在我的头像中我正在加载:

    <script type="text/javascript">
$(document).ready(function(){  
    $('.fancybox').fancybox();

    // Change title type, overlay closing speed
    $(".fancybox-effects-a").fancybox({
        helpers: {
            'overlayColor'             :        '#ec2d2d',

            title : {
                type : 'outside'
            },
            overlay : {
                speedOut : 30,
                css: {
                    'background-color': '#ec2d2d'
                },
            },
            overlayColor: {
                css: '#ec2d2d',             
            }
        }
    });



    $("#hidden_link").fancybox().trigger('click');

});  
</script>

我的HTML就像这样:

<a class="fancybox fancybox.iframe" id="hidden_link" href="iframe.html" title="HOI">Iframe</a>

它打开onload。但我不能让叠加层变成红色。

我在这里缺少什么? 我已经尝试了,因为你看到了几个选项。但是没有一个以正确的方式使用。

TIAD

修改

当我尝试添加此代码时:

            $(".fancybox").fancybox({
            beforeShow : function() {
                $('.fancybox-overlay').css({'background-color' :'#ec2d2d'});
            }

我似乎弄乱了语法。因为它不响应这个脚本。但我对如何正确地做到这一点毫无头绪。

这就是我现在所拥有的:

    <script type="text/javascript">
    $(document).ready(function(){       
        $(".fancybox").fancybox({
            beforeShow : function() {
                $('.fancybox-overlay').css({'background-color' :'#ec2d2d'});
            },
            helpers: {
                title : {
                    type : 'outside'
                },
                overlay : {
                    speedOut : 30,
                    css: {
                        'background-color': '#ec2d2d'
                    },
                },
                overlayColor: {
                    css: '#ec2d2d',             
                }
            }
        });

        $("#hidden_link").fancybox().trigger('click');
    }); 
</script>

同时添加CSS代码也没有区别:

        #fancybox-overlay{
        background-color:#ec2d2d !important;
    }

可能是因为加载了另一个JS文件会覆盖我的所有设置吗?

这些是加载的库:

    <script type="text/javascript" src="../lib/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="../lib/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript" src="../source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.5" media="screen" />
<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
<script type="text/javascript" src="../source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
<script type="text/javascript" src="../source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript" src="../source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>

3 个答案:

答案 0 :(得分:2)

只需在显示fancybox之前设置背景颜色。

$(".fancybox").fancybox({
    beforeShow : function() {
        $('.fancybox-overlay').css({'background-color' :'#ec2d2d'});
    }
});

然后从.fancybox()

中删除$("#hidden_link").fancybox().trigger('click');

就像这样,它会完美运作。

答案 1 :(得分:0)

您应该能够在CSS中更改叠加颜色

#fancybox-overlay{background-color:#ec2d2d !important;}

答案 2 :(得分:0)

您可以单独执行叠加,

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