我试图让 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()
就像这样它会完美地工作。
关于javascript - JQuery FancyBox 覆盖颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18888432/