如何将fancybox默认居中对齐时的位置向下偏移100px。
我相信没有相关的API设置。请问有谁可以帮我在实际脚本中实现这个功能呢？
18个回答
21
我成功实现的解决方案是将包装器样式设置为：
#fancybox-wrap {
position: absolute;
top: 100px !important;
}
希望能对你有所帮助！
- jede
6
我也使用过这个，但如果你有一个可以向下滚动的页面，那么fancybox将会在顶部打开，你可能需要向上滚动才能看到它... - basZero
1@basZero：我也是。我在onComplete事件中使用了scrollTop。我使用了lqthang86的答案。 - Valamas
@Valamas-AUS，你是说你成功地在一个长页面上实现了fancybox，它会在当前可见页面部分的顶部打开？你能把你的代码作为单独的答案发布吗？非常感谢...在我的情况下，它仍然不起作用。 - basZero
是的，长页面和短页面效果相同。我从这个答案中添加了onComplete事件和scrollTop代码（忽略额外的CSS）。https://dev59.com/zHA75IYBdhLWcg3wm6ex#9731058 - Valamas
@Valamas-AUS 这是否意味着当fancybox打开时，浏览器在打开fancybox之前先向顶部滚动？ 这将是一种非常不友好的行为。当前页面内的垂直位置不应更改，而应调整fancybox的位置，使其似乎打开在当前视图的顶部。 - basZero
当我滚动到较长的页面时，我发现用户甚至看不到这个花哨的框，因为它在页面的顶部100像素处。模态外观使情况更糟，因为主页面没有滚动能力，只能使用鼠标滚轮进行hack-scroll向上滚动。所以，在短页面和长页面之间，这是我解决很少使用的功能的方法；查看衣服尺码指南的图片。当然，如果这是一个你不断点击不同图像的画廊，那么滚动到顶部会很烦人。 - Valamas
13
$.fancybox({
'width' : 620,
'height' : 490,
'speedIn' :600,
'speedOut' :200,
'onComplete': function() {
$("#fancybox-wrap").css({'top':'20px', 'bottom':'auto'});
}
});
- ziasumo
2
6它无法正常工作。它只能将图像移动到顶部，但在转换后无法如此。 - seler
1这在我的情况下无效，这是哪个版本的fancybox可以工作？ - basZero
6
在fancyBox 2中，我使用了
topRatio : 0属性，这个属性将fancyBox移动到顶部，然后我使用了jQuery().css()将它放在我想要的位置。例如：$("#myfancy").fancybox({
wrapCSS : 'fancybox-custom',
maxWidth : 500,
maxHeight : 360,
fitToView : false,
width : '85%',
height : '95%',
autoSize : false,
openEffect : 'fade',
openSpeed : 'slow',
closeEffect : 'fade',
modal : true,
closeSpeed : 'slow',
topRatio : 0,
helpers : {
overlay : {
css : {
'background-color' : '#fff'
}
}
}
}).trigger('click');
jQuery('.fancybox-wrap').css('margin-top', '120px');
- Derekthar
4
滚动条位置。
$.fancybox({
'width' : 620,
'height' : 490,
'speedIn' :600,
'speedOut' :200,
'onComplete': function() {
$(document).scrollTop(0);
$("#fancybox-wrap").css({'top':'20px', 'bottom':'auto'});
}
});
- lqthang86
3
如果您只想将fancybox定位高一点，可以使用参数"topRatio"，请查看文档：http://fancyapps.com/fancybox/#docs。
- user510566
1
topRatio - 垂直居中的顶部空间比例。如果设置为0.5，则垂直和底部空间将相等。如果为0，则fancyBox将位于视口顶部。数字；默认值：0.5。 - Marek Bar
3
这个可以工作。只需在加载fancybox css后添加样式，这将覆盖任何移动。
<link rel="stylesheet" type="text/css" href="../css/fancybox/jquery.fancybox-1.3.4.css" media="screen" >
<style type="text/css">div#fancybox-wrap {top:100px !important;}</style>
Source
- pocketasez
3
$('.fancybox').fancybox({
topRatio: 0,
afterShow: function(){
$(".fancybox-wrap").css({"top":0, "margin":"100px 0 0"});
}
});
- Md Toufiqul Islam
3
改变top的值为100px，而不是使用margin，这样不是更好吗？ - AJ.
我很感谢你的论点，但这样做行不通，topRatio:0的值会将其设置在顶部。在这种情况下，您必须从顶部向下进行边距调整。 - Md Toufiqul Islam
你能提供一个可行的例子吗？为了澄清，我的意思是这个“top”（不确定我是否表达清楚）
$（“.fancybox-wrap”）.css（{“top”：“100px”}）; - AJ.1
我不知道你使用的fancybox版本是否为2.xxx，但如果是的话，你可以像这样设置默认边距：
$("#myfancy").fancybox({
margin : [100, 0, 20, 0],
...
margin 属性设置包装器的位置（以像素为单位），数组中的第一个数字是 TOP。
- Nereo Costacurta
1
我稍微调整了上面的代码。现在它对我来说运行良好。
<script type="text/javascript">
$(document).ready(function() {
$('a.fancybox').each(function(){
var fWidth = parseInt($(this).attr('href').match(/width=[0-9]+/i)[0].replace('width=',''));
var fHeight = parseInt($(this).attr('href').match(/height=[0-9]+/i)[0].replace('height=',''));
var posTop = parseInt($(this).attr('href').match(/top=[0-9]+/i)[0].replace('top=',''));
var posLeft = parseInt($(this).attr('href').match(/left=[0-9]+/i)[0].replace('left=',''));
var marLeft = parseInt($(this).attr('href').match(/marleft=[0-9]+/i)[0].replace('marleft=',''));
$(this).fancybox({'type':'iframe','transitionIn':'elastic','transitionOut':'elastic','width':fWidth,'height':fHeight,onStart: function () {
//create a style that will position the fancy box relative to the element that clicked it.
var leftT=posLeft;
var topT=posTop;
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.shekhar{ top: ' + topT + 'px !important; left: ' + leftT + '% !important; margin-left: -' + marLeft + 'px !important; }';
document.getElementsByTagName('head')[0].appendChild(style);
$('#fancybox-wrap').addClass("shekhar");
}
});
});
});
</script>
HTML在这里：
<ul>
<li><a class="fancybox" href="http://iacampaigns.co.in/fiama/WAP/index.html?iframe&width=100&height=100&top=100&left=50&marleft=200">Iframe</a></li>
<li><a class="fancybox" href="http://iacampaigns.co.in/fiama/WAP/index.html?iframe&width=200&height=200&top=100&left=50&marleft=100">Iframe</a></li>
</ul>
- shekhar
1
如果使用V2，在移动设备上，下面的辅助方法可以解决问题：
$('.fancybox_success').fancybox({
afterShow: function () {
if ($portWidth <= $mobileBreakpoint) {
$('html,body').animate({ scrollTop: 0 }, 'slow');
}
},...
- Ben Sewards
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接