Question

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

1）foo 2）酒吧2）酒吧3）更多4）foobar 5）barfoo

现在当用户点击foo时，我希望colorbox显示为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将所有内容定位到所需位置。

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

希望有所帮助

如何为jquery colorbox模态设置不同的位置？

2 个答案: