jQuery .css body opacity

Question

我有一个新闻标签，每当用户单击它时，弹出框会显示详细信息，但是我想让背景或body标签本身变暗，所以我写了以下代码：

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

然而，盒子本身也会变暗。有没有办法让盒子忽略这个命令？或者还有其他的解决方法吗？

- RnD

---

当您像这样使用时，不透明度将被子元素继承。您还尝试了什么？也许可以添加一个 jsfiddle 来展示您尝试过的内容。 - phenomnomnominal

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

- Chris

Answer 2

很遗憾，没有其他办法。因为弹出窗口在body标签内部，所以它随着不透明度的变化而改变。

唯一的解决方法是创建一个覆盖整个body的半透明叠加层，然后将你的弹出窗口放在上面。

- Purag