javascript - 如何通过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 div 以显示为覆盖

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

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

你可以检查这个http://jsfiddle.net/kN65R/