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

我正在构建一个有两个Colorbox的页面。如何在同一页面上为Colorbox指定2个不同的位置？

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

#colorbox，#cboxOverlay {位置：绝对的;顶部：0;左：0;的z-index：9999; overflow：hidden;} #cboxWrapper {position：fixed;保证金：0汽车;的z-index：9999;溢出：隐藏;右：0;顶部：18px;}

但是，我真的很想能够分开定位我的两个Colorboxes。我的思路是有两个不同的CSS（例如colorbox.css和colorbox2.css）并相应地进行调整，但是如何判断哪个Colorbox要跟随哪个CSS文件？

如果有意义的话，我在初学者和中级之间有点儿差异，所以如果有人能帮助我解决这个问题，那将会很棒。

谢谢！

来源

2010-11-02 Hasanah

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

来源

2010-11-02 08:44:26 MatTheCat

你的意思是这样的：<脚本类型= “文/ JavaScript的”> \t $（文件）。就绪（函数（）{ （“。popupa”）。colorbox（{iframe：true，transition：“fade”，width：500，height：500，open：true，position：“fixed”，right：55}）; \t \t \t \t \t $（“。popupb”）。colorbox（{iframe：true，transition：“fade”，width：375，height：800}）; \t \t \t}）; 我曾尝试过，似乎没有工作。也许我没有做对吗？ – Hasanah 2010-11-02 08:49:06

我看不到任何课程添加？在我看来，JQuery提供了一个“addClass”函数。 – MatTheCat 2010-11-02 09:11:54

哦，对不起，我真的不熟悉addClass函数。如果它是这样的：\t $（document）.ready（function（）{ \t \t $（“。popupa”）。colorbox（{iframe：true，transition：“fade”，width：500，height： 500，open：true}）; \t \t $（“。colorbox”）。addClass（“testing”）; \t \t $（“。popupb”）。colorbox（{iframe：true，transition：“fade”，宽度：375，高度：800}）; \t \t \t}）; 虽然它似乎仍然不起作用。 – Hasanah 2010-11-02 09:35:51

最好的办法是设置了使用不同的参数colorboxed

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

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

来源

2011-07-09 06:30:00

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

回答

相关问题