如何将fancybox放在上面
如何将fancybox 100px从顶部定位到默认情况下它是居中对齐的。
我相信没有api设置。 任何人都可以帮助我在实际的脚本上做这件事。
$.fancybox({ 'width' : 620, 'height' : 490, 'speedIn' :600, 'speedOut' :200, 'onComplete': function() { $("#fancybox-wrap").css({'top':'20px', 'bottom':'auto'}); } }); 我开始工作的解决方案就像这样设计包装器：
#fancybox-wrap { position: absolute; top: 100px !important; }
希望能帮助到你！
在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');
scrollTop页面。
$.fancybox({ 'width' : 620, 'height' : 490, 'speedIn' :600, 'speedOut' :200, 'onComplete': function() { $(document).scrollTop(0); $("#fancybox-wrap").css({'top':'20px', 'bottom':'auto'}); } });
这个有效。 只需在加载fancybox css后添加样式即可。 这将覆盖任何运动。
资源
如果您只想将fancybox放置得有点高，可以使用此参数：“topRatio”，请查看http://fancyapps.com/fancybox/#docs上的文档。
$('.fancybox').fancybox({ topRatio: 0, afterShow: function(){ $(".fancybox-wrap").css({"top":0, "margin":"100px 0 0"}); } });
不知道你使用的fancybox版本是否为2.xxx，但在这种情况下你可以像这样设置默认的边距：
$("#myfancy").fancybox({ margin : [100, 0, 20, 0], ...
margin设置包装器的位置（px）（数组中的第一个数字是TOP）
如果使用V2，下面的帮助方法可以在移动设备上执行操作：
$('.fancybox_success').fancybox({ afterShow: function () { if ($portWidth <= $mobileBreakpoint) { $('html,body').animate({ scrollTop: 0 }, 'slow'); } },...
双向攻击但通过使用“固定”位置而不是绝对位置将禁用滚动停止框架移出页面
内部CSS：
.fancybox-wrap { position:fixed !important; top: 100px !important; };
fancyBox jQuery：
onComplete : function(){ $('.fancybox-wrap').css({'position':'fixed', 'top':'100px'}); }
对于本文档http://fancyapps.com/fancybox/#docs中提到的fancyBox 2.0及更高版本
margin ：视口和fancyBox之间的最小间距。 可以设置为数组 – [顶部，右侧，底部，左侧]。 如果内容尺寸超出视口，则忽略右边距和下边距
整数，数组; 默认值：20
例：
$('.fc-event').fancybox({ autoCenter: true, margin: [100, 0, 0, 0], // [top, right, bottom, left] type: 'ajax',
我自己从未使用过fancybox，但看起来你需要将centerOnScroll设置为false，然后使用css定位#fancybox-wrap但是你觉得合适。
//pass in the id of the link that was clicked and set the width and height for the iframe $.fn.fancybox_new = function (options) { for (i = 0; i < this.length; i++) { options._id = $(this[i]).attr("id"); switch (options._id) { case "elementid": //set window size based on id options.width = 375; options.height = 190; break; } $(this[i]).fancybox(options); } }; $("a[rel*=formWin]").fancybox_new({ onStart: function () { //create a style that will position the fancy box relative to the element that clicked it. if (this._id != "" && !$(this).hasClass(this._id)) { var style = document.createElement('style'); var pos = $("#" + this._id).position(); var mRight = parseInt($("#" + this._id).css("margin-right").replace("px")) + parseInt($("#" + this._id).css("padding-right").replace("px")) + parseInt($("#" + this._id).css("margin-left").replace("px")) + parseInt($("#" + this._id).css("padding-left").replace("px")); var mTop = parseInt($("#" + this._id).css("margin-top").replace("px", "")) + parseInt($("#" + this._id).css("padding-top").replace("px", "")) + parseInt($("#" + this._id).css("margin-bottom").replace("px", "")) + parseInt($("#" + this._id).css("padding-bottom").replace("px", "")); style.type = 'text/css'; style.innerHTML = '.' + this._id + ' { top: ' + (pos.top + $("#" + this._id).height() + mTop) + 'px !important; right: ' + ($("body").width() - pos.left - $("#" + this._id).width() - mRight).toString() + 'px !important; left:auto !important; }'; document.getElementsByTagName('head')[0].appendChild(style); $('#fancybox-wrap').addClass(this._id); } } });
两个可能的问题：
- Fancybox没有获得绝对位置或z-index。 解决方案：在包装器中添加
!important，其中position是绝对的。 - 他们下面的Div也有绝对位置或正z-index。 解决方案：给出固定位置或相对于div的下方，并调整或添加负z-index。
我修改了fancybox库
版本：1.3.4（11/11/2010）
使这项工作：
在文件jquery.fancybox.js中找到行：
$.fancybox.center = function() {
在此范围内查找：
wrap .stop() .animate({ 'top' : parseInt(Math.max(view[3] - 20, view[3] + ((view[1] - content.height() - 40) * 0.5) - currentOpts.padding)),
并将其更改为：
var topFromOptions = parseInt(Math.max(view[3] - 20, view[3] + ((view[1] - content.height() - 40) * 0.5) - currentOpts.padding)); if (currentOpts.top) { topFromOptions = currentOpts.top; } wrap .stop() .animate({ 'top' : topFromOptions,
在选择器传递选项中撤消fancybox时（例如）：
top: '100px'
或者你想要的:)
$('#fancybox-selector').fancybox({ top: '20px', // transitionOut:'elsatic' });
这对我来说很好