将彩盒的字幕移到盒子顶部？
Nur*_*man 2 css jquery colorbox
我正在使用colorbox在我的项目中打开模态窗口.
有5种风格使用colorbox.我正在使用此网址上的示例5:http://www.jacklmoore.com/colorbox/example5/
我试图将colorbox.js的标题行(标题属性文本,背景和关闭图标)移动到框的顶部 - 它默认为底部.我该怎么做？
这是示例5中Colorbox窗口的常规视图:
这是我真正想要的:
CSS*_*ian 10
你必须做两件事: 第一件事很容易; 你必须编辑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;}
您必须尝试获取"顶部"属性的正确值.
要做的第二件事可能更难.该插件使用一个名为controls.png的图像'sprite'(许多图像的组合).看着它,它没有必要的图像来做你想要的.
如果您有能力使用图像编辑器,则可以修改此图像并添加必要的图像,然后根据CSS中的典型精灵使用确定使用新图像内容所需的XY坐标.不知道你是否愿意这样做.
啊,但你认为这是一个简单的改变,嗯？祝你好运!
- @NuriAkamn你可以在这里获得新的皮肤:(https://rcpt.yousendit.com/1498340855/344a3f8b844f4f9cb425d7f971ebd126) (3认同)
- 凯文,我不知道你是怎么设法摧毁那个PNG的图像质量但是你做到了.否则,工作出色.如果你正在使用它,你可以在这里获得更好的质量controls.png http://i.stack.imgur.com/6YNOc.png (2认同)
小智 5
只需复制colorbox.css底部的下面提到的代码即可
#colorbox #cboxClose
{
top: 0;
right: 0;
}
#cboxLoadedContent{
margin-top:28px;
margin-bottom:0;
}