jQuery .css正文不透明度

Question

我有一个新闻标签,每当用户点击它时,弹出框会显示详细信息,但我希望背景或身体标签本身变暗,所以我写道:

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

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

Answer 1

由于正文包含#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%.上面是指定了z-index的#pbox,以确保它显示在顶部.

jQuery代码有点像这样:

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