彩盒更改关闭按钮图像答案

【问题标题】：Colorbox changing close button image彩盒更改关闭按钮图像
【发布时间】：2014-09-03 04:45:49
【问题描述】：

我正在尝试更改 JackMoore 的颜色框。起初我想更改关闭 (x) 按钮。但现在我意识到 X 按钮甚至没有出现。我做了很多修改，比如去掉覆盖层和扩大窗口大小。

我想把X放在右上角...

如示例“内联 html” http://www.jacklmoore.com/colorbox/example2/#inline_content

这些是我修改的部分，但现在我不知道为什么我不能让它显示.. 甚至不是默认的..

#cboxOverlay{position:fixed; width:0%; height:0%;} 
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; text-indent:-9999px; width:20px; height:20px; position:absolute; top:-20px; background:url('images/map-yellow-dot.gif') no-repeat 0 0;}

我用上面的黄点替换了关闭按钮。

我认为我需要这个来将标题框移到顶部.. 但它似乎没有做任何事情

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

这是我的 colorbox.js.. 也在那里制作了模组

transition: "elastic",
        speed: 300,
        fadeOut: 300,
        width: '70%',
        initialWidth: "50%", 
        innerWidth: false,
        maxWidth: '75%',
        height: '100%',
        initialHeight: "50%",  
        innerHeight: false,
        maxHeight: '100%',
        scalePhotos: true,
        scrolling: false,
        opacity: 0.1,
        preloading: true,
        className: false,
        overlayClose: false,
        escKey: true,
        arrowKey: true,
        top: '10%',
        bottom: false,
        left: '24%',
        right: false,
        fixed: false,
        data: undefined,
        closeButton: true,
        fastIframe: true,
        open: false,
        reposition: true,
        loop: true,
        slideshow: false,
        slideshowAuto: true,
        slideshowSpeed: 2500,
        slideshowStart: "start slideshow",
        slideshowStop: "stop slideshow",

有什么想法吗？

【问题讨论】：

你到底想要什么？您想将关闭按钮更改为自定义图像吗？并且您想减少颜色框中的顶部空间，不是吗？
我希望能够将我自己的图像用于 X 按钮。但我想首先，我需要我的 X 按钮来显示..因为它不是

标签： jquery html css colorbox

【解决方案1】：

我们可以将颜色框关闭按钮移到右上角。只需使用以下 CSS 样式将关闭按钮移至右上角即可。

<style>
    #colorbox #cboxClose {
        top: 0 !important;
        right: 0 !important;
    }
    #cboxLoadedContent {
        margin-top:28px !important;
        margin-bottom:0 !important;
    }
</style>

我已使用上述代码解决了我的场景中的问题。

【讨论】：