[英]JQuery FancyBox overlay color
我试图让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>
只需在显示fancybox之前设置背景颜色。
$(".fancybox").fancybox({
beforeShow : function() {
$('.fancybox-overlay').css({'background-color' :'#ec2d2d'});
}
});
然后从$("#hidden_link").fancybox().trigger('click');
删除.fancybox()
$("#hidden_link").fancybox().trigger('click');
就像这样,它会完美地运作。
您应该能够在CSS中更改叠加颜色
#fancybox-overlay{background-color:#ec2d2d !important;}
你可以单独执行叠加,
$.fancybox.helpers.overlay.open({parent: $('body')});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.