jQuery Colorbox 在关闭时隐藏内容答案

【问题标题】：jQuery Colorbox hide content on closejQuery Colorbox 在关闭时隐藏内容
【发布时间】：2010-11-10 16:35:14
【问题描述】：

我正在尝试使用 <a> 链接的 onclick 在颜色框中显示隐藏的 div

这是我的标记，

<style type="text/css">
.lightbox-content{ display: none }
</style>

<div class="panel yellow">
    <h4 class="font">Title</h4>
    <a title="View now &raquo;" class="learnmore" href="#">View now &raquo;</a>
    <div class="lightbox-content">
        <h4>The first lightbox</h4>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    </div>
</div>

<script type="text/javascript">
    $('.panel .learnmore').click(function(e){
        e.preventDefault();
        var d = $(this);
        $.colorbox({
            width: 920,
            inline: true,
            href: d.siblings('div.lightbox-content'),
            opacity: 0.5,
            open: true,
            onLoad: function(){
                d.siblings('div.lightbox-content').fadeIn()
            },
            onCleanup: function(){
                d.siblings('div.lightbox-content').hide()
            }
        })
    });
</script>

现在灯箱将打开，并且可以正常加载内容。它甚至会淡入内容。问题是，一旦灯箱关闭，display: block 样式就会应用于.lightbox-content，我似乎无法摆脱它。

我想隐藏内容，在灯箱中单击时显示，然后在关闭时再次隐藏。

有什么想法吗？

【问题讨论】：

标签： javascript jquery colorbox

【解决方案1】：

给你。您需要将其包装在一个隐藏的容器中。内联命令获取内容，然后在关闭颜色框后替换它。 jsfiddle

【讨论】：

【解决方案2】：

http://jsfiddle.net/hSp3m/9/

$('.panel .learnmore').click(function(e){
    var d = $(this);
    $.colorbox({
        width: 600,
        inline: true,
        opacity: 0.5,
        href: d.siblings('div.lightbox-content'),
        onOpen: function(){
            d.siblings('div.lightbox-content').fadeIn()
        },
        onCleanup: function(){
            $('div.lightbox-content').hide();
        }
    }); return false;
});

查看@功能，它应该隐藏所有灯箱内容，因此更改了 oncleanup 以清除所有灯箱内容 div。

【讨论】：