Question

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

由于js库动态生成popup div的代码，在不重复任何代码的情况下，为网站上的不同页面处理不同“外观”的最有效方法是什么？

Answer 1

虽然它可以动态生成HTML，但它仍然使用与其他所有相同的CSS。因此，只需添加必需的页面<style>标记，其中包含必需的css，它将覆盖默认样式或准备一些css文件，css规则会覆盖默认样式，您将在需要时将其附加到页面。

Answer 2

你可以考虑的一件事是没有彩色盒本身的CSS，而是将弹出的内容放在自己的页面中并通过ajax调用它。让所有特定的CSS弹出自己的页面。我以前用过这种方法。彩盒文件中唯一需要的CSS是背景颜色/透明度/图像。

Answer 3

如何<body> id与文件名相同，例如<body id="index">和<body id="about_us">，而不是在colorbox.css文件中添加样式，例如

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

我使用slimbox并执行上述操作。

Answer 4

我不需要为此提供单独的CSS文件..

让我们在第一页中说你的颜色框在

<div class="divA">

    // Color Box 1
</div>

<div class="divB">

    // Color BoX 1
</div>

您可以在colorBox类之前添加此类以完成工作。

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

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