javascript - 如何为 jquery colorbox modal 设置不同的位置？

Question

默认情况下，颜色框在屏幕上垂直和水平居中。有没有办法改变它，例如我有这样的东西：

1)foo 2)bar 2)bar 3)more 4)foobar 5)barfoo

现在当用户点击 foo 时，我希望颜色框显示为 left:20%, top:-200px; 当用户点击栏时，我希望颜色框以相同的顶部位置（-200px）显示，但这次，向左 50%，点击更多将向左 60%，foobar 将向左 70%等等。我怎样才能实现这一点而不必为每个元素设置一个类并为所有这些都做 css？谢谢

Answer 1

使用定位设置

$('a#foo').colorbox({top:'-200px', left:'20%'});
$('a#bar').colorbox({top:'300px', left:'40%'}); 

我猜是这样的；我还没有测试过，但希望它能让你朝着正确的方向前进

 var topposition = '220';
 var leftposition = '10';
 $('a#bar').colorbox({top: topposition+'px', left:leftposition+'px', onComplete: function () {
    topposition = ($('#colorbox').offset().top) + 50;
    leftposition = ($('#colorbox').offset().left) + 10;
}});

看看这个小提琴，这样你就可以看到它在行动 http://jsfiddle.net/4tkf5/13/

Answer 2

听起来您正在尝试执行下拉菜单之类的操作。只要颜色框项位于菜单项中，您就可以使用 CSS 将所有内容放置在您想要的位置。

菜单项需要是相对位置，颜色框位置是绝对位置，然后您可以仅使用一个类移动它们，并使用同一类隐藏和显示它们。

希望有帮助