手动定位Fancybox 2

Question

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

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

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

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

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

Answer 1

您可以使用修改器覆盖内联CSS样式!important.

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

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

Answer 2

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

CSS:

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

JS:

$(".open_fancybox").click(function() {
  $.fancybox.open('<h1>lorem ipsum</h1>', {
    beforeShow : function() {
      $('.fancybox-wrap').addClass('fancybox-wrap22');
    }
  });
  return false;
});