JQuery FancyBox overlay color

Question

Я попытался загрузить Fancybox iFrame для автоматической загрузки и для наложения другого цвета. До сих пор так хорошо на автозагрузке.

Got it working. Цвет, который я не мог изменить.

Теперь я попробовал несколько примеров, перечисленных здесь. Но я думаю, что я делаю что-то неправильно.

В моей голове кода я загрузка:

<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

Edit:

Когда я пытаюсь добавить этот код:

  $(".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'}); 
    } 
}); 

, а затем удалить .fancybox() из $("#hidden_link").fancybox().trigger('click');

Точно так же как это он будет работать отлично.

Answer 2

Вы должны быть в состоянии изменить цвет наложения в CSS

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

Answer 3

Вы можете выполнить в одиночку накладку,

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