如何通過html評論創建一個覆蓋？

Question

如何通過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> 

Answer 1

你需要使用絕對位置和z索引它。假設你的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格顯示爲覆蓋

$("#overlay").bind("click",function(){ 

    $("#dvOver").show(); 
}); 

您可以檢查此http://jsfiddle.net/kN65R/