javascript - jQuery .css body 不透明度

我有一个新闻选项卡，每当用户单击它时，弹出框就会显示详细信息，但是我希望背景或body标签本身变暗，所以我这样写:

$("#read").click(function(){
    $("#pbox").fadeIn('slow');
    $("body").css({"opacity": "0.5"});
});

但是，盒子本身要么变暗。有没有办法让盒子忽略此命令？也许还有另一种方法？

最佳答案

由于主体包含#pbox，因此该盒子本身将受到您已应用的50％不透明度的约束。更好的方法是在整个窗口上覆盖一个半透明的div，然后在其上方放置#pbox，如下所示:

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
    width: 100%;
    height: 100%;
    display: none;
}

#pbox {
    z-index: 1;
}

因此，在这里，白色#overlay div出现在所有内容上，且不透明度为50％。它的上方是#pbox，其中指定了z-index以确保其显示在顶部。

jQuery代码将如下所示:

$("#read").click(function(){
    $("#pbox").fadeIn('slow');
    $("#overlay").show().css({"opacity": "0.5"});
});