手动定位Fancybox 2

Question

我真的无法想象如何重新定位Fancybox 2以使用left: 47px;和top: 147px

我已经阅读了源代码，但没有找到一种方法来覆盖定位。

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

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

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

- bafromca

---

如果你能找到准确的代码，你可能可以使用文档不完善的helpers:选项来实现。如果我能找到准确的代码，我会将其发布为答案。 - Sparky

我找不到任何东西。我认为如果不编辑插件的源代码，你想要做的事情是不可能的选择。如果你打算这样做，最好添加额外的定位选项，这样至少插件仍然具有可扩展性。 - Sparky

Answer 1

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

对于Fancybox的用例，以下内容将覆盖JavaScript定位：

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

- leepowers

---

这被Fancybox 2使用jQuery的css()注入的内联CSS覆盖。 - bafromca

很奇怪 - !important 应该覆盖任何内联样式，包括使用 css() 设置的样式 - 参见这里：http://jsfiddle.net/YKhEG/ - 或许 #fancybox-wrap 不是正确的选择器？ - leepowers

这就是它：.fancybox-wrap。你说得对，这就是我需要的全部。谢谢！ - bafromca

当我像这样硬编码CSS时，它对我非常有效，但我需要动态定位弹出窗口。当我尝试像这样动态设置位置时 $(".fancybox-wrap").css("top", "5px"); 它似乎被设置了，但被忽略了。如果我添加!important修饰符，它甚至似乎都没有被设置。有什么想法我做错了什么吗？ - Mark Rausch

Answer 2

我通过在beforeShow处理程序中手动添加一个新的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;
});

- thejaeck.net

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

- TractorCow

---

这是一个很好的解决方案。你怎么样让fancybox在触发元素的顶部以稍微偏移20px的位置出现？还有，在你的代码示例中，onlyAbsolute代表什么意思？ - Agent Zebra

Answer 4

Lucas Teixeira是对的！这对我有用。首先关闭中心功能，然后使用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>   

- Arcadiy Mordecai

Answer 5

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

- thejaeck.net

Answer 6

我有一个类似的问题 - 我想手动定位fancybox，但它一直自动重新居中。

我通过禁用居中功能解决了这个问题:

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

- Lucas Teixeira

Answer 7

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

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

- gerl