JQuery FancyBox疊加顏色

Question

我試圖讓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>

Answer 1

只需在顯示fancybox之前設置背景顏色。

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

然后從$("#hidden_link").fancybox().trigger('click');刪除.fancybox() $("#hidden_link").fancybox().trigger('click');

就像這樣，它會完美地運作。

Answer 2

您應該能夠在CSS中更改疊加顏色

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

Answer 3

你可以單獨執行疊加，

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