Question

我是彩盒新手。我想在我的颜色框中添加一个按钮（因为我想用一个显示“关闭”的按钮替换颜色框中的X按钮）。在this tutorial之后（我不想要社交媒体按钮，只是一个简单的“关闭”按钮），我编写/尝试了以下代码。但它没有添加颜色框的按钮。我错过了什么？

var myButtonVar = '<div id="myButton">Button Text</div>';
jQuery("#cboxContent").append('<div id="buttons">' + myButtonVar +'</div>'); 

$.colorbox({width:"30%", inline:true, href:"#inline_content",
    onClosed: function() {
        alert("closing");
    },
});

Answer 1

“x”是一个显示“关闭”的按钮 - 它只是有一些缩小它的CSS样式，缩进文本以使其不可见，并添加背景图像。您可以使用以下CSS撤消这些内容并添加一些样式：

#cboxClose {
    background: none;
    text-indent: 0px;
    width: 40px;
    border: 1px solid;
    height: 15px;
    margin-top: 3px;
}

如果你有一个分组的颜色框，那么箭头会妨碍你新设置的按钮，所以你必须将它们向左滑动，如下所示：

#cboxPrevious {
    right: 64px;
}
#cboxPrevious {
    right: 42px;
}

如果您有幻灯片放映，您可能也想要播放播放/暂停按钮：

#cboxSlideshow {
    right: 84px;
}

如何在颜色框的底部添加按钮

1 个答案: