主要利用了2个Div的z-index不同。
<html>
<head>
<style type='text/css'>
.block_overlay {
display:none;
position:absolute;
top:0%;
left:0%;
width:100%;
height:100%;
background-color:gray;
z-index:100;
filter:alpha(opacity=80);
}
.div_content {
display:none;
position:absolute;
top:25%;
left:25%;
width:50%;
height:50%;
z-index:101;
border:10px solid green;
overflow:auto;
background-color:white;
}
</style>
<script>
openWin = function(flag) {
var content = document.getElementById('content');
var full = document.getElementById('full');
if (flag == 'show') {
content.style.display = 'block';
full.style.display = 'block';
}
else {
content.style.display = 'none';
full.style.display = 'none';
}
}
</script>
</head>
<body>
<p>
This is the main content.<br>
To show lightbox,please<a href="#" οnclick="openWin('show');">Click</a>
</p>
<div id="content" class="div_content">
This is the div content.<a href="#" οnclick="openWin('hide');">Close</a>.
</div>
<div id="full" class="block_overlay"></div>
</body>
</html>
523
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
