jQuery 如何在顶部放置fancybox
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3197877/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to position fancybox on top
提问by Nizam
How to position the fancybox 100px from top by default it is center aligned.
如何将fancybox 从顶部放置100px 默认情况下它是居中对齐的。
I believe there is no api settings for that. Can anyone help me out in doing it on the actual script.
我相信没有 api 设置。任何人都可以帮助我在实际脚本上做这件事。
采纳答案by ziasumo
$.fancybox({
'width' : 620,
'height' : 490,
'speedIn' :600,
'speedOut' :200,
'onComplete': function() {
$("#fancybox-wrap").css({'top':'20px', 'bottom':'auto'});
}
});
回答by jede
The solution I got working was styling the wrapper like this:
我得到的解决方案是像这样设置包装器的样式：
#fancybox-wrap {
position: absolute;
top: 100px !important;
}
Hope it helps!
希望能帮助到你！
回答by Derekthar
In fancyBox 2 I use topRatio : 0, this propery move fancyBox at top, then I used jQuery().css()to put it where I want. Example:
在我使用的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');
回答by lqthang86
scrollTop page.
滚动首页。
$.fancybox({
'width' : 620,
'height' : 490,
'speedIn' :600,
'speedOut' :200,
'onComplete': function() {
$(document).scrollTop(0);
$("#fancybox-wrap").css({'top':'20px', 'bottom':'auto'});
}
});
回答by user510566
If you just want to position the fancybox a little bit high, you can use this parameter: "topRatio", check out the document at http://fancyapps.com/fancybox/#docs.
如果你只是想把fancybox 放高一点，你可以使用这个参数：“topRatio”，查看http://fancyapps.com/fancybox/#docs 上的文档。
回答by pocketasez
This one works. Just add the style after loading the fancybox css. This will overide any movement.
这个有效。加载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
来源
回答by Md Toufiqul Islam
$('.fancybox').fancybox({
topRatio: 0,
afterShow: function(){
$(".fancybox-wrap").css({"top":0, "margin":"100px 0 0"});
}
});
回答by Nereo Costacurta
don'y know if version of fancybox you're using is 2.xxx, but in this case you can set the default margin like this:
不知道您使用的fancybox 版本是否为2.xxx，但在这种情况下，您可以像这样设置默认边距：
$("#myfancy").fancybox({
margin : [100, 0, 20, 0],
...
where margin set the position (px) of the wrapper (first number in the array is TOP)
其中 margin 设置包装器的位置（px）（数组中的第一个数字是 TOP）
回答by Ben Sewards
If using V2, the below helper method would do the trick on mobile devices:
如果使用 V2，下面的辅助方法可以在移动设备上实现：
$('.fancybox_success').fancybox({
afterShow: function () {
if ($portWidth <= $mobileBreakpoint) {
$('html,body').animate({ scrollTop: 0 }, 'slow');
}
},...
回答by Jonathan Green
A two pronged attack but by using position 'fixed' as opposed to absolute will disable scrolling an stop the frame from moving off the page
两管齐下的攻击，但使用“固定”位置而不是绝对位置将禁用滚动并阻止框架移出页面
Internal CSS:
内部 CSS：
.fancybox-wrap { position:fixed !important; top: 100px !important; };
fancyBox jQuery:
FancyBox jQuery：
onComplete : function(){
$('.fancybox-wrap').css({'position':'fixed', 'top':'100px'});
}
