手动定位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。