将彩盒的字幕移到盒子顶部？

Question

我正在使用colorbox在我的项目中打开模态窗口。

使用colorbox有5种风格。我正在使用此网址上的示例5：http://www.jacklmoore.com/colorbox/example5/

我正在尝试将colorbox.js的标题行（标题属性文本，背景和关闭图标）移动到框的顶部 - 它默认为底部。我该怎么办？

这是示例5中Colorbox窗口的常规视图：

这是我真正想要的：

Answer 1

你必须做两件事： 第一件事很简单;你必须编辑CSS文件（colorbox.css）并更改以下元素的位置规则：

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

这样他们的绝对定位是基于'top'属性而不是'bottom'属性。这是一个例子，在编辑之前和之后（之前版本被注释掉）：

/*#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 的图像'精灵'（许多图像的组合）。看着它，它没有必要的图像来做你想要的。

如果您胜任图像编辑器，则可以修改此图像并添加必要的图像，然后根据CSS中的典型精灵使用确定使用新图像内容所需的X-Y坐标。不知道你是否愿意这样做。

啊，但你认为这是一个简单的改变，嗯？祝你好运！

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;

Answer 4

找到一种更简单的方法来改变贴近图像， 在jquery.colorbox.js

中更改单词“close”到您的图像

当前：“{total}的图片{当前}”， 上一篇：“上一篇”， 下一个：“下一个”， 关闭：“”，//是“关闭” xhrError：“此内容无法加载。”， imgError：“此图片无法加载。”，

Answer 5

替换此

       $content = $tag(div, "Content").append(
            $title = $tag(div, "Title"),
            $current = $tag(div, "Current"),
            $prev = $('<button type="button"/>').attr({id:prefix+'Previous'}),
            $next = $('<button type="button"/>').attr({id:prefix+'Next'}),
            $slideshow = $('<button type="button"/>').attr({id:prefix+'Slideshow'}),
            $loadingOverlay
        );

        $close = $('<button type="button"/>').attr({id:prefix+'Close'});

使用

$content = $tag(div, "Content").append(
        //$title = $tag(div, "Title"),   // comment this line
        $current = $tag(div, "Current"),
        $prev = $('<button type="button"/>').attr({id:prefix+'Previous'}),
        $next = $('<button type="button"/>').attr({id:prefix+'Next'}),
        $slideshow = $('<button type="button"/>').attr({id:prefix+'Slideshow'}),
        $loadingOverlay
    );

    $close = $('<button type="button"/>').attr({id:prefix+'Close'});
    // add this new code
    $wrap  = $tag(div, "Wrapper").append(
            $title = $tag(div, "Title")
    );