how to create an overlay by html comment?

Question

how to create an overlay by html comment ?

please see my code bellow:

<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

you need to use position absolute and z-index for it. suppose your html will be like this

<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>

Now you can just use jquery to show/hide dvOver div to display as overlay

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

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

you can check this http://jsfiddle.net/kN65R/