如何通过html注释创建叠加层?

时间:2014-01-27 06:44:44

标签: javascript jquery

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

enter image description here

1 个答案:

答案 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();
});

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