手动定位Fancybox 2

我不能为我的生活,弄清楚如何重新定位Fancybox 2使用left: 47px;top: 147px

我阅读了源代码,并且没有黑客攻击,我没有看到覆盖定位的方法。

autoCenter设置为false仅在一次执行后停止自动居中。

使用jQuery来更改CSS,或者给自定义包装器来应用CSS也不起作用,因为Fancybox总是添加内联CSS来覆盖我的所有尝试。

有没有办法告诉Fancybox停止定位并使用我的绝对定位?

您可以使用!important修饰符覆盖内联CSS样式。

对于Fancybox用例,以下内容将覆盖JavaScript定位:

 .fancybox-wrap { top: 147px !important; left: 47px !important; } 

我通过在beforeShow-Handler中手动添加一个新的css类来解决这个问题。 我用过fancybox2。

CSS:

 .fancybox-wrap22 { top: 22% !important; } 

JS:

 $(".open_fancybox").click(function() { $.fancybox.open('

lorem ipsum

', { beforeShow : function() { $('.fancybox-wrap').addClass('fancybox-wrap22'); } }); return false; });

我为fancybox2找到了这个解决方案。 您可以覆盖默认的_getPosition方法以防止更改一个或多个维度。

 // Disable vertical repositioning var orig = $.fancybox._getPosition; $.extend($.fancybox, { _getPosition: function(onlyAbsolute) { var rez = orig(onlyAbsolute); delete rez.top; return rez; } }); 

你不能这样改变CSS吗? 显然将保证金属性更改为“顶部”和“左侧”

 $("a.fancybox1").fancybox({ 'hideOnContentClick': false, 'onComplete' : function() { $("#fancybox-wrap").css('margin', 'auto'); } }); 

我想你不能以这种方式改变css,因为fancybox核心一直在编辑#fancybox-wrap的style属性。 所以你必须添加一个新类,就像在我描述的例子中一样。 否则你将看不到任何visuell变化。

我有一个类似的问题 – 我想手动定位一个fancybox但它会自动重新定中心。

我解决了它禁用中心function:

 $.fancybox.center = function(){}; 

卢卡斯特谢拉是对的! 这对我有用。 首先关闭中心函数,然后使用onComplete事件按需设置内联css。