jQuery FancyBox覆盖颜色 [英] JQuery FancyBox overlay color

问题描述

我试图让Fancybox iFrame自动加载并为叠加层提供不同的颜色. 到目前为止，自动加载效果很好.

I have tried to get a Fancybox iFrame to load automatically and to give the overlay a different color. So far so good on the autoload.

使其正常工作. 我无法改变的颜色.

Got it working. The color I couldn't get to change.

现在，我尝试了几个示例，在此处列出了许多示例.但是我想我做错了.

Now I tried several examples many listed here. But I guess I am doing something wrong.

在我的头代码中，我正在加载:

In my head code I am loading :

    <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是这样的:

And my HTML is like this :

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

它将在加载时打开.但是我无法使叠加层变成红色.

It opens onload. But I cannot get the overlay to turn red.

我在这里想念什么? 如您所见，我已经尝试了几种选择.但是没有人使用正确的方法.

What am I missing here? I have tried as you see several options. But none used the right way.

TIAD

当我尝试添加此代码时:

When I try to add this code:

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

我似乎把语法弄得一团糟.因为它不响应此脚本.但是我不知道如何正确地做到这一点.

I seem to make a mess of the Syntax. Because it doesn't respond to this script. But I am clueless of how to do this correctly.

这就是我现在得到的:

    <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代码也没什么区别

Also adding the CSS code makes no difference:

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

是否有另一个加载的JS文件覆盖了我的所有设置?

Could it be that there is another JS file loaded that overwrites all of my settings??

这些是加载的库:

    <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>

推荐答案

只需在显示fancybox之前设置背景颜色即可.

Just set the background color before showing of fancybox.

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

，然后从$("#hidden_link").fancybox().trigger('click');

就像这样，它会完美地工作.

Just like this it'll work perfectly.

这篇关于jQuery FancyBox覆盖颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！