Question

首先，这是我在stackoverflow上的第一篇文章，所以如果我在某事上做错了，请纠正我。

我使用Fancybox时遇到问题，我使用的是Fancybox v2.1.5。您可能知道Fancybox会自动将您的fancybox定位在屏幕中间。我实际上需要将我的fancybox定位在屏幕左侧和顶部的特定像素数量上（这些值是可变的并且在窗口调整大小时会发生变化，这就是为什么我认为CSS不是解决方案的原因）。

我写了一小段JavaScript代码，以确保fancybox保持在正确的位置，但显然Fancybox插件有自己的脚本，以确保fancybox居中。正如您所想象的那样，这两段代码相互冲突，使得fancybox从正确的位置跳到中心位置。

所以我的问题是，如何确保Fancybox不会将我的fancybox放在中心位置，以便我可以使用自己的代码来定位fancybox？

如果您有兴趣，这是我用来定位我的fancybox的代码：

var position = "";
var position_interval = setInterval(function() { 
    if ($('#module1').offset().left != position.left)
    {
        $('.social_fancybox').css($('#module1').offset());
        position = $('#module1').offset();
    }
    if ($('.social_fancybox').length < 1)
    {
        clearInterval(position_interval);
    }
}, 100);

Answer 1

Fancybox 2.5有一些你想看的参数。

$('.fancybox').fancybox({
    'topRatio':0,
    'leftRatio':0
});

因此，使用这两个参数，您可以设置弹出窗口从顶部/左侧的数量。默认为0.5，将弹出窗口置于屏幕中间。

或者，您可以调用afterShow函数，该函数会在弹出窗口显示后立即触发。在该功能中，您可以指定弹出窗口的位置。

http://fancyapps.com/fancybox/#docs

Answer 2

您可以添加使用!important修饰符的CSS规则。这会否决该元素的所有其他CSS规则，例如：

p {color:red !important;}
p {color:blue;}

p会有红色文字。

要将其应用于您的fancybox，请使用以下命令：

.fancybox-wrap {
    top:100px !important; /* or whatever you choose */
    left:100px !important; /* or whatever you choose */
}

更多：Position Fancybox 2 manually

修改或者，您可以使用jQuery手动设置Fancybox的位置;

$('.fancybox-wrap').css('top',yourTopValue); $('.fancybox-wrap').css('left',yourLeftValue);

如何禁用Fancybox的自动居中？

2 个答案: