Я попытался загрузить 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>
Просто установите цвет фона перед показом fancybox.
$(".fancybox").fancybox({
beforeShow : function() {
$('.fancybox-overlay').css({'background-color' :'#ec2d2d'});
}
});
а затем удалить .fancybox()
из $("#hidden_link").fancybox().trigger('click');
Точно так же он будет работать отлично.
Вы можете выполнить оверлей в одиночку,
$.fancybox.helpers.overlay.open({parent: $('body')});
Вы должны иметь возможность изменять цвет наложения в CSS
#fancybox-overlay{background-color:#ec2d2d !important;}