这个遮罩问题是这样的:
一个div里面还有个div , 要点击里面的div时,放大显示,并在其后显示一个遮罩,把其他的都遮住。
其中外面的div是fixed的,这个就比较难搞了, 里面的div指定一个更高的z-index没用。
一遮罩,就把2个div都遮住了。
经过研究,终于解决了:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
html, body {
margin: 0;
padding: 0;
}
#div_con {
width: 300px;
height: 300px;
padding: 10px;
text-align: center;
border: 1px solid red;
background: #faa;
z-index: 100;
position: fixed;
left: 100px;
top: 100px;
}
#div_box {
width: 100px;
height: 100px;
border: 1px solid green;
background: #bfb;
}
</style>
<div id='div_con'>
<div id='div_box' onclick='max_me()'>
点我呀
</div>
</div>
<script src='http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js'></script>
<script>
//初始化遮罩层
function initMyMask() {
$("<div id='div_my_mask'></div>").css({
position: 'absolute',
top: 0,
left: 0,
backgroundColor: "#444",
opacity: 0.8,
zIndex: 300
})
.height($(document).height())
.width($(document).width()).hide().appendTo("body");
$('#div_my_mask').click(function () {
$(this).hide();
$('#div_box').css({position: 'inherit', width: 100, height: 100});
});
}
initMyMask();
function max_me() {
console.log(max_me);
let t_left = $('#div_con').offset().left;
let t_top = $('#div_con').offset().left;
$('#div_con').css({position: 'inherit', marginLeft: t_left, marginTop: t_top});
$('#div_box').css({position: 'absolute', left: 500, top: 200, width: 500, height: 300});
$('#div_box').css('zIndex', 1000);
$("#div_my_mask").show();
}
</script>
</html>
另外,对于不方便遮住的情况,可以分成几块来遮住