把彩色盒子的标题移到盒子的顶部？

Question

在我的项目中，我使用彩色盒打开模态窗口。

有5种样式可以使用彩色盒。我在这个url：http://www.jacklmoore.com/colorbox/example5/上使用示例5

我正在尝试将colbox.js的标题行(标题属性文本、背景和关闭图标)移到框的顶部-它默认为底部。我该怎么做呢？

--这是例5:上彩色盒窗口的正常视图

​

​

，这是我真正想要的：

​

​

Answer 1

您必须做两件事：，第一件很容易；您必须编辑CSS文件(colorbox.css)，并更改以下元素的位置规则：

#cboxTitle, #cboxCurrent, #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow

因此，它们的绝对定位是基于“顶层”属性，而不是“底部”属性。下面是一个示例，在编辑之前和之后(前一个版本被注释掉)：

/*#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;} */
  #cboxCurrent{position:absolute; top: 0; left:58px; font-weight:bold; color:#7C7C7C;}

您必须进行实验，才能获得“top”属性的适当值。

第二件事可能更难做。该插件使用了一个名为controls.png的图像“sprite”(由许多图像组成的组合)。看看它，它没有必要的图像来做你想做的事情。

如果您具备图像编辑器的能力，您可以修改此图像并添加必要的图像，然后根据CSS中典型的sprite使用确定使用新图像内容所需的X协调。不知道你是否愿意这么做。

啊，但你觉得这只是个简单的改变，嗯？祝你好运！

Answer 2

只需将下面提到的代码复制到colorbox.css的底部

#colorbox #cboxClose { top: 0; right: 0; } #cboxLoadedContent{ margin-top:28px; margin-bottom:0; }

Answer 3

编辑colorbox.css进行以下更改

1. Replace 
#cboxLoadedContent{margin-bottom:28px;}
with 
#cboxLoadedContent{margin-top:28px;}

2. Replace
#cboxClose{position:absolute; bottom:0;
with
#cboxClose{position:absolute; top:0;