javascript - jQuery .css 主体不透明度

Question

我有一个新闻标签，每当用户单击它时，弹出框都会显示详细信息，但是我希望背景或正文标签本身变暗，所以我写道：

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

然而，盒子本身也变暗了。有没有办法让盒子忽略这个命令？或者也许还有另一种方法？

Answer 1

由于 body 包含 #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"});
});

Answer 2

不幸的是，没有。由于弹出窗口位于 body 标记内，因此它包含在不透明度更改中。

做到这一点的唯一方法是制作一个覆盖整个身体并且是半透明的覆盖层，然后将弹出窗口放在上面。