CSS
.myoverlay
{
position: absolute;
background-color: rgba(0, 0, 0, 0.7);
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity: 0.5;
}
HTML
<html>
<head></head>
<body>
<div id="MyDiv">
//some content
</div>
</body>
</html>
jQuery
$(function(){
$("body").not('#MyDiv').addClass("myoverlay");
});
这里我想将覆盖层应用到除 MyDiv 之外的正文。上面显示的代码正在将覆盖应用于包括 MyDiv 在内的完整正文。
最佳答案
这是代码!是你想要的吗？
<html>
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<style>
.myoverlay:not(#MyDiv) {
position: absolute;
background-color: rgba(0, 0, 0, 0.7);
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity: 0.5;
}
#MyDiv {
width: 200px;
height: 200px;
background: White;
z-index: 10;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="MyDiv">
<div>
</div>
</div>
</div>
</body>
<script>
$(function () {
$('.wrapper').addClass('myoverlay');
});
</script>
</html>
关于javascript - 向除元素之外的主体添加覆盖层，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20210428/