我在同一页面上有两个不同的fancybox开场白。我希望.fancybox2上有黑色边框,而.fancybox1上有常规白色边框。还有一些其他细微差别。这是剧本。
$(".fancybox").fancybox1({
padding:10,
helpers: {
title: {
type: 'inside'
},
overlay: {
css : {
'background': 'rgba(0,0,0,0.6)'
}
}
}
});
//Fancy box number 2 not working with different style
$(".fancybox2").fancybox({
padding:10,
openEffect: 'elastic',
closeEffect: 'elastic',
helpers: {
title: {
type: 'inside'
},
overlay: {
locked: false,
css : {
'background': 'rgba(255,255,255, 0.6)'
}
}
}
});
我试过使用这种风格,但这会影响两者,它们都会有黑色border.enter代码在这里
<style type="text/css">.fancybox-skin {background-color: #000 !important;}</style>
任何人都有一些建议如何解决这个问题?
答案 0 :(得分:1)
Consider declaring your CSS using the Fancybox's Callbacks.
For example; Here I can make use of the beforeShow
event to change .fancybox-skin
to white for every element with class .fancybox1
$(".fancybox1").fancybox({
beforeShow: function(){
// here set the border color for each class
$(".fancybox-skin").css("backgroundColor","white");
},
helpers : {
overlay : {
css : {
'background': 'rgba(0,0,0,0.6)'
}
}
}
});
Here is a full demo as per your requirements