Question

我想为我的帖子内容进行叠加，例如全屏模式对话框＆＃39;。我一直在隐藏和展示我的内容和项目。我希望在显示内容时，项目将变为不可见。

$(function(){
    $('.item').on('click',function(){
        $(this).next('.content').css('display','block');
    });


});

我也试过

 var item= $(this).next('.content').detach();
$('body').html('').append(item.css('display','block');

但我必须重新加载页面才能返回项目页面，这是不好的。

Answer 1

使用

DEMO FIDDLE

 $('.item').on('click',function(){
      $('.content').hide(); // hide 
        $(this).next('.content').show(); // show
    });

动画

DEMO FIDDLE(Animation)

 $('.item').on('click', function () {
    $('.content').hide("slow", function () {
        // Animation complete.
    }); // hide 
    $(this).next('.content').show("slow", function () {
        // Animation complete.
    }); // show
});

Answer 2

创建叠加div

<div class="overlay"></div>

的CSS：

.overlay {
    display:none;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    opacity: 0.5;
    z-index: 100;
    background: black;
}

点击项目激活叠加并显示内容。

$(function () {
    $('.item').on('click', function () {
        $('.item, .content').hide();
        $('.overlay').show();
        $(this).next('.content').css('display', 'block');
    });

    $('.close-content').on('click', function () {
        $('.content, .overlay').hide();
        $('.item').show();
    });

});

还添加了关闭按钮的规定。

Fiddle

使用jquery隐藏和显示覆盖模态

2 个答案: