2

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

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

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

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

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

这就是我真正想要的：

这是我真正想要的

4

5 回答 5

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;}

您必须尝试获得“top”属性的正确值。

要做的第二件事可能更困难。该插件使用名为controls.png的图像“精灵”（许多图像的组合）。看着它，它没有做你想做的事所必需的图像。

如果您有能力使用图像编辑器，则可以修改此图像并添加必要的图像，然后根据 CSS 中的典型精灵使用确定使用新图像内容所需的 XY 坐标。不知道你是否适合这个。

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

于 2012-05-05T06:22:40.057 回答
5

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

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

于 2013-08-15T00:11:21.623 回答
1

编辑 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;
于 2015-08-06T11:44:56.047 回答
0

找到了一种更简单的方法来更改图像的关闭，将单词“关闭”更改为 jquery.colorbox.js 中的图像

current: "image {current} of {total}", previous: "previous", next: "next", close: "", //was "close" xhrError: "This content failed to load.", imgError: "此图片加载失败。",

于 2013-01-19T16:24:32.843 回答
0

替换这个

       $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")
    );
于 2017-01-13T08:01:54.073 回答