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
});

你可能当然需要为这个div使用z-index，并且可以将所有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);

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

1 个答案: