我有一个新闻标签,每当用户单击它时,弹出框会显示详细信息,但是我想让背景或body标签本身变暗,所以我写了以下代码:
$("#read").click(function(){
$("#pbox").fadeIn('slow');
$("body").css({"opacity": "0.5"});
});
然而,盒子本身也会变暗。有没有办法让盒子忽略这个命令?或者还有其他的解决方法吗?
我有一个新闻标签,每当用户单击它时,弹出框会显示详细信息,但是我想让背景或body标签本身变暗,所以我写了以下代码:
$("#read").click(function(){
$("#pbox").fadeIn('slow');
$("body").css({"opacity": "0.5"});
});
由于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"});
});