Javascript JQuery FancyBox覆盖颜色
我已经尝试让Fancybox iFrame自动加载,并为覆盖层提供不同的颜色。 到目前为止,在自动加载方面还不错 让它工作起来。 我无法改变的颜色 现在,我尝试了这里列出的几个例子。但我想我做错了什么 在我的头代码中,我正在加载:Javascript JQuery FancyBox覆盖颜色,javascript,jquery,html,css,fancybox-2,Javascript,Jquery,Html,Css,Fancybox 2,我已经尝试让Fancybox iFrame自动加载,并为覆盖层提供不同的颜色。 到目前为止,在自动加载方面还不错 让它工作起来。 我无法改变的颜色 现在,我尝试了这里列出的几个例子。但我想我做错了什么 在我的头代码中,我正在加载: <script type="text/javascript"> $(document).ready(function(){ $('.fancybox').fancybox(); // Change title type, ov
<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>
我似乎把语法弄得一团糟。因为它不响应这个脚本。但我不知道如何正确地做到这一点
这就是我现在得到的:
<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>
是否有另一个加载的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>
您应该能够在CSS中更改覆盖颜色
#fancybox-overlay{background-color:#ec2d2d !important;}
只需在显示fancybox之前设置背景色
$(".fancybox").fancybox({
beforeShow : function() {
$('.fancybox-overlay').css({'background-color' :'#ec2d2d'});
}
});
然后从$(“#隐藏链接”)中删除.fancybox()
。fancybox()。触发器('click')代码>
就像这样,它将完美地工作。您可以单独执行覆盖
$.fancybox.helpers.overlay.open({parent: $('body')});
似乎是第一位
#fancybox-overlay{background-color:#ec2d2d !important;}
$(".fancybox").fancybox({
beforeShow : function() {
$('.fancybox-overlay').css({'background-color' :'#ec2d2d'});
}
});
$.fancybox.helpers.overlay.open({parent: $('body')});