在不同的页面上使用不同的CSS样式的colorbox？

我在网站上使用Colorbox（弹出窗口的js库）。在某些页面上，我需要为colorbox和/或其部分使用不同的外观（如关闭框，使用不同的png文件）。在不同的页面上使用不同的CSS样式的colorbox？

由于js库在运行中为弹出式div生成代码，因此在网站上处理不同页面的不同“外观”而不复制任何代码的最有效方法是什么？

2012-10-04 Steve

使用不同的css文件 – Erwin

虽然它在运行中生成HTML，但它仍然使用与其他所有内容相同的CSS。因此，只需在需要的页面<style>上添加标签，该标签将覆盖默认样式或准备少量css文件，其中css规则将覆盖默认样式，当您需要时将附加到您的页面。

2012-10-04 19:28:00

对不起，为了更加准确我需要做的是调用两个或多个不同的colorboxes_on_different css parameters_在同一page_。调用它时，有没有办法将ID或CLASS分配给colorbox？所以我可以有#yellowbox和#redbox“？ – Steve

嗯，我会看看'onComplete'回调，并添加所需的样式（'$（'＃colorbox'）。addClass（”redbox“）'）到一些包装元素（看起来像'＃colorbox'是你需要的那个） –

我刚试过这个但是如果失败了（colorbox从不打开）： '$（“。iframe”）。colorbox（{iframe：true，width：“200px” ，“height：”500px“，onOpen：myFunc}）;'然后 'function myFunc（）{$（'＃cboxLoadedContent'）。addClass（”redbox“））;}' – Steve

如何给<body>的id相同文件名，如<body id="index">和<body id="about_us">和比colorbox.css文件中添加的风格，如

body#index wrapper gallery 
{ 
background-color: #foo; 
}

我用slimbox和上面做的。

来源

2012-10-04 19:31:00 Jawad

谢谢，但是看到我的进一步阐述，我需要在一个页面上有多个不同属性的框，当我在网页上只有一个页面时，我已经完成了你多次提出的建议，正如FAngel所建议的，我可能需要添加带回调的类 – Steve

我没有事情，你将需要一个单独的CSS文件..

可以说，在第一页的颜色框是

<div class="divA"> 

    // Color Box 1 
</div> 

<div class="divB"> 

    // Color BoX 1 
</div>

可以前彩盒类的添加该类完成你的工作。你可以考虑

.divA colorbox-class 
{ 
    // Your Style Color Box 1 
} 

.divB colorbox-class 
{ 
    // Your Style Color Box 2 
}

来源

2012-10-04 19:35:29

但是colorbox不在div中，是吗？我打电话给我一个是页面加载，另一个是点击事件。 '' – Steve

雅这是真的..只是游戏你一个例子。只要打开你的萤火虫，并检查其中包装彩盒的父母 –

谢谢。但是在同一页面上有不同的方框是问题。他们总是使用相同的DOM结构，我需要一个很好的方式来区分。 – Steve

有一两件事是没有CSS的颜色框本身，而是具有流行的内容在自己的网页，并通过AJAX调用它。让所有特定的CSS弹出自己的页面。我以前使用过这种方法。您在colorbox文件中唯一需要的CSS是背景颜色/透明度/图像。

来源

2012-10-04 20:06:56 Tom

谢谢，我忘记了Ajax加载方法。过去我已经使用了内联方法。好的。 – Steve

在不同的页面上使用不同的CSS样式的colorbox？

回答

相关问题