jQuery/CSS:变暗/掩盖所有div /浏览器窗口 - 除了一个选定的div

Question

我在一个单页的网站上有一些jQuery Isotope插件逻辑正在进行中.

当一个项目被选中并最大化以显示某些内容时,我想在最小化之后使所有其他项目变暗/变暗/掩盖 - 除了点击的那个.这是我现在的工作逻辑; 单击的项目将添加所选的类,已选择的*项*将在单击时删除所选的类:

$('.item').click(function(){
    if($(this).hasClass('selected')){
        $(this).removeClass('selected');
        $(this).children('.maximised').hide()
        $(this).children('.minimised').show()
    }else{
        $(this).addClass('selected');
        $(this).children('.minimised').hide()
        $(this).children('.maximised').show()
    }
    $container.isotope('shuffle');
    $container.isotope('reLayout');
});

操作透明度看起来不太好,因为背景图像/视频变得可见.也许我可以轻易地"暗淡"整个浏览器窗口？理想情况下,我会避免使用其他插件.你有什么建议我能达到预期的效果吗？

非常感谢你提前!

Answer 1

我认为你正在寻求以下解决方案.

$(".item").click(function(e) {
    //code
    $("body").append($("<div>").css({
        position: "fixed"
        ,width: "100%"
        ,height: "100%"
        ,"background-color": "#000"
        ,opacity: 0.6
        ,"z-index": 999
        ,top: 0
        ,left: 0
    }).attr("id","page-cover"));
    //more code
});

你当然可能需要使用z-indexfor the div,并且可以将所有CSS放在样式表中.

备用

您可以将此div放在BODY标记的末尾并使用此CSS:

#page-cover {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 999;
    top: 0;
    left: 0;
}

有了这个JS:

//on click of .item
$("#page-cover").show().css("opacity",0.6);