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

Answer 2

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

这样做的唯一方法是制作覆盖整个身体并且半透明的覆盖层，然后将弹出窗口置于其上方。

jQuery .css正文不透明度

2 个答案: