JQuery FancyBox叠加色
JQuery FancyBox叠加色
提问于 2013-09-19 07:16:29
我已经尝试获得一个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>回答 3
Stack Overflow用户
回答已采纳
发布于 2013-09-19 07:32:54
只需在显示fancybox之前设置背景色即可。
$(".fancybox").fancybox({
beforeShow : function() {
$('.fancybox-overlay').css({'background-color' :'#ec2d2d'});
}
});然后从.fancybox()中删除$("#hidden_link").fancybox().trigger('click');
就像这样，它会完美地工作。
Stack Overflow用户
发布于 2013-09-19 07:24:57
您应该能够更改CSS中的覆盖颜色。
#fancybox-overlay{background-color:#ec2d2d !important;}Stack Overflow用户
发布于 2015-06-17 18:36:16
你可以单独执行覆盖，
$.fancybox.helpers.overlay.open({parent: $('body')});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18888432
复制相关文章
相似问题
腾讯云开发者
