如何通过html评论创建叠加层?
请看下面的代码:
<style type="text/css">
*{margin:0;padding:0;}
body{padding:50px;}
.box{width:50px;height:50px; background-color:tan;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function create_part_overlay(){
// how can I create an overlay on top of the part 1?
// the overlay should cover form '<!-- bof ... -->' to '<!-- eof ... -->'
}
</script>
<button onclick="create_part_overlay()">create part overlay</button>
<p>hello world</p>
<!-- bof part (1) -->
<div class="box">box</div>
<h3>good boy</h3>
<div class="box">box</div>
<!-- eof part (1) -->
<p>hello world</p>
答案 0 :(得分:1)
你需要使用position绝对值和z-index。假设您的HTML将是这样的
<button id="overlay">create part overlay</button>
<div style="position:absolute">
<p>hello world</p>
<!-- bof part (1) -->
<div class="box">box</div>
<h3>good boy</h3>
<div class="box">box</div>
<!-- eof part (1) -->
</div>
<div id="dvOver" style="display:none">
<div style="top:20;left:20;z-index:999;position:absolute;width:200px;height:200px;background-color:black;opacity:0.7" >
This is my boxo
</div>
</div>
<p>hello world</p>
现在你可以使用jquery来显示/隐藏dvOver div以显示为叠加
$("#overlay").bind("click",function(){
$("#dvOver").show();
});