Question

我正在尝试更改JackMoore的彩盒。起初我想改变关闭（x）按钮。但现在我意识到X按钮甚至没有显示出来。我做了一些修改，比如去掉叠加层并扩展窗口大小。

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

就像示例“inline 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 ..也在那里制作了mods

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",

有什么想法吗？

Answer 1

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

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

我已使用上面的代码解决了我的情况。

Colorbox改变关闭按钮图像

1 个答案: