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

Question

我正在构建一个包含两个Colorbox的页面。

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

  

＃colorbox，＃cdOverlay {position：absolute;顶部：0;左：0;的z-index：9999;溢出：隐藏;}   #cboxWrapper {position：fixed;保证金：0自动;的z-index：9999;溢出：隐藏;右：0;顶部：18像素;}

但是，我真的希望能够单独定位我的两个Colorboxes。我对此的想法是有两个不同的CSS（例如colorbox.css和colorbox2.css）并相应地进行调整，但是如何判断哪个Colorbox跟随哪个CSS文件？

如果有意义的话，我会介于初级和中级之间，所以如果有人可以帮我解决这个问题，那就太棒了。

谢谢！

Answer 1

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

Answer 2

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

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

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