使用 Colorbox 显示 div 的问题

Question

好日子专业人士，

我正在使用Colorbox插件显示某个div，但是出现了这个问题。

结构如下：

1- 要显示的隐藏 div

2- 显示 btn 以显示 div

当我第一次单击 btn 时，div 显示没有任何问题，但是当我按 ESC btn 关闭它并再次返回上一步并单击 btn 时，颜色框打开但不显示 div

这是 HTML 代码

<div class="to_be_show">
    <!-- html structure is here -->
</div>
<p class="display">display</p>

这是css样式

.to_be_show{ width: 500px; height: 200px; background: red; display: none; }

这是JS代码

$('.display').click(function(){ $('.to_be_show').css('display','block'); });
$('.display').colorbox({opacity: 0.98,inline:true});
$(document).bind('cbox_closed', function() {$('.to_be_show').css('display','none'); });

那么，我的代码有什么问题？！

-------- 更新 ----------

我知道问题，但我不知道如何解决！！！

我想在动态加载内容时使用 Jquery 设置显示的 href 属性

我用了这个但没用！！！

$('.show_album').colorbox({href:$(this).prev()});

为什么？？！！

Answer 1

您可以通过创建内嵌颜色框来实现此目的

HTML 标记

<div style="display:none">
    <div class="to_be_show" id="to_be_show">
        Element to be show
    </div>
</div>
<a href="#to_be_show" class="inline cboxElement">Display</a>

css

.to_be_show {
    width: 500px;
    height: 200px;
    background: red;
}

Js

$(document).ready(function () {
    $(".inline").colorbox({
        inline: true,
        opacity: 0.98,
    });
});

这里正在工作fiddle。

别忘了包括 彩盒 css & js 干杯！！！