如何在同一页面上为 Colorbox 指定 2 个不同的位置？答案

【问题标题】：How to specify 2 different positions for Colorbox on the same page?如何在同一页面上为 Colorbox 指定 2 个不同的位置？
【发布时间】：2011-07-09 14:40:02
【问题描述】：

我正在构建一个包含两个颜色框的页面。

现在，我已经设法通过调整 colorbox.css 文件使任何 Colorbox 一般出现在固定位置：

#colorbox, #cboxOverlay {位置：绝对；顶部：0；左：0； z 指数：9999；溢出：隐藏；} #cboxWrapper { 位置：固定；边距：0 自动； z 指数：9999；溢出：隐藏；对：0；顶部：18px;}

但是，我真的希望能够分别放置我的两个 Colorbox。我的思路是拥有两个不同的 CSS（例如 colorbox.css 和 colorbox2.css）并进行相应的调整，但是我如何判断哪个 Colorbox 遵循哪个 CSS 文件？

如果有道理的话，我有点介于初级和中级之间，所以如果有人能帮我解决这个问题，那就太好了。

谢谢！

【问题讨论】：

标签： css position colorbox

【解决方案1】：

您只需为一个颜色框添加一个类并覆盖该类的位置规则。

【讨论】：

你的意思是这样的：我之前尝试过，但似乎不起作用。也许我没有做对？
我看不到任何添加的类？在我看来，JQuery 提供了一个“addClass”功能。
哦，对不起，我对addClass函数真的不熟悉。应该是这样的： $(document).ready(function(){ $(".popupa").colorbox({iframe:true, transition:"fade", width:500, height:500, open:true} ); $(".colorbox").addClass("testing"); $(".popupb").colorbox({iframe:true, transition:"fade", width:375, height:800}); }) ;不过，它似乎仍然不起作用。
第一个颜色框没有“测试”类吗？
是的，我刚刚添加了这一点，但它似乎并没有覆盖位置规则。我会尝试再次调整我的代码，我一定是在某个地方出错了。不过谢谢！

【解决方案2】：

最好的方法是使用不同的参数设置颜色框

$(".colorbox1").each(function(i) {
    $(this).colorbox({top:200});
});

$(".colorbox2").each(function(i) {
    $(this).colorbox({top:100});
});

【讨论】：