2

我正在开发一个单页网站上的一些 jQuery Isotope 插件逻辑。

当一个项目被选中并最大化以显示某些内容时，我想在它们被最小化后使所有其他项目变暗/变暗/屏蔽- 除了被点击的那个。这是我现在的工作逻辑；单击的项目会添加所选的类，已选择的*item* 会在单击时删除所选的类：

$('.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');
});

处理透明度看起来不太好，因为背景图像/视频变得可见。也许我可以轻松地以某种方式“调暗”整​​个浏览器窗口？理想情况下，我会避免使用另一个插件。你有什么建议我可以达到预期的效果吗？

非常感谢您！

4

1 回答 1

8

我认为您正在寻求以下解决方案。

$(".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 this 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);
于 2012-07-08T11:22:54.190 回答