0

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>

オンロードで開きます。しかし、オーバーレイを赤くすることはできません。

ここで何が欠けていますか？いくつかのオプションが表示されるので、試してみました。しかし、誰も正しい方法を使用しませんでした。

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

3 に答える 3

2

ファンシーボックスを表示する前に背景色を設定するだけです。

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

そして、から削除.fancybox()します$("#hidden_link").fancybox().trigger('click');

これだけで完璧に動作します。

于 2013-09-19T07:32:54.947 に答える
0

オーバーレイを単独で実行できます。

$.fancybox.helpers.overlay.open({parent: $('body')});
于 2015-06-17T18:36:16.363 に答える