Question

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

我阅读了源代码，并且没有黑客入侵，我没有看到覆盖定位的方法。

将autoCenter设置为false只会在第一次时间后停止自动居中。

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

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

Answer 1

您可以使用!important修饰符override inline CSS样式。

对于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;
});

Answer 3

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

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

Answer 4

你不能这样改变css吗？显然将margin属性更改为“top”和“left”

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

Answer 5

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

Answer 6

我遇到了类似的问题 - 我想手动定位一个fancybox，但它会自动重新定位。

我解决了它禁用中心功能：

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

Answer 7

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

   <script>
        jQuery(document).ready(function () {

            //turn off center function
            $.fancybox.center = function () { };

            //use onComplete event to modify inline css 
            $("#ModalPopup").fancybox({
                'modal': true,
                'onComplete': function () {
                    $("#fancybox-wrap").css({ 'left': '250px', 'top': '150px' });
                }
            });

        });
   </script>

手动定位Fancybox 2

7 个答案: