Question

我正在尝试使用<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，我似乎无法摆脱它。

我希望隐藏内容，在灯箱中点击显示内容，然后在关闭时再次隐藏它。

有什么想法吗？

Answer 1

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

Answer 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。

jQuery Colorbox隐藏内容

2 个答案: