彩盒更改关闭按钮图像

Posted 2023-02-25

【中文标题】彩盒更改关闭按钮图像

【英文标题】：Colorbox changing close button image

【发布时间】：2014-09-03 04:45:49

【问题描述】：

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

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

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

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

#cboxOverlayposition: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 按钮来显示..因为它不是

【参考方案1】：

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

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

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