0

首先，这是我在 stackoverflow 上的第一篇文章，如果我在某些方面错了，请纠正我。

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

我写了一小段 JavaScript 代码来确保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);
4

2 回答 2

0

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

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

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

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

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

于 2013-08-07T22:35:30.553 回答
-1

您可以添加使用!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 */
}

更多：手动定位 Fancybox 2

编辑： 或者，您可以使用 jQuery 手动设置 Fancybox 的位置；

$('.fancybox-wrap').css('top',yourTopValue);
$('.fancybox-wrap').css('left',yourLeftValue);
于 2013-08-07T22:27:09.323 回答