// HTML
<button id="myButton">打开Colorbox</button>

// JavaScript
$(document).ready(function() {
    $('#myButton').click(function() {
        $.colorbox({
            html: "<h2>这是通过按钮触发的内容</h2>",
            width: "50%",
            height: "50%"
        });
    });
});

$('#showImageBtn').click(function() {
    $.colorbox({
        href: "path/to/image.jpg",
        title: "我的图片",
        maxWidth: "90%",
        maxHeight: "90%"
    });
});

$('#showIframeBtn').click(function() {
    $.colorbox({
        iframe: true,
        href: "external-page.html",
        width: "80%",
        height: "80%"
    });
});

<div style="display:none">
    <div id="inlineContent">
        <h3>这是内联内容</h3>
        <p>可以通过按钮触发显示</p>
    </div>
</div>

<script>
$('#showInlineBtn').click(function() {
    $.colorbox({
        inline: true,
        href: "#inlineContent",
        width: "60%"
    });
});
</script>

$('#myButton').off('click').on('click', function() {
    // Colorbox代码
});

$('#myButton').click(function() {
    $.colorbox({
        html: "<h2>带回调的示例</h2>",
        onOpen: function() { console.log("Colorbox打开"); },
        onLoad: function() { console.log("内容加载完成"); },
        onComplete: function() { console.log("完全显示"); },
        onCleanup: function() { console.log("开始关闭"); },
        onClosed: function() { console.log("已关闭"); }
    });
});

$('#dynamicContentBtn').click(function() {
    var dynamicHTML = "<div>当前时间: " + new Date() + "</div>";
    $.colorbox({html: dynamicHTML});
});