Как создать наложение по 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

вам нужно использовать позицию абсолютного и г-индекс для нее. предположим, что ваш 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(); 
}); 

вы можете проверить это http://jsfiddle.net/kN65R/