js 弹出层

今天需要在网站中加个弹出层的设计 ，本想找代码粘贴下，谁知百出来的都是一堆代码，看的头晕，还不如自己来个。

不知道这样做是否正确，但确实挺简单。看到别人一堆的代码 不知为何......

<script src="jquery-1.7.0.min.js"></script>
<style>
   
</style>
<div>
    <a class="he">ok</a>
</div>
<div id="div" style="width:100%;height:100%;top:0px;left:0px;position:absolute;opacity:0.2;background-color:#000000;display:none">   
</div>
<div id="tanchu" style="width:300px;height:200;border:solid 1px #000000;position:absolute;display:none;background-color:white"><span class="clo">close</span></div>
<script>
$(function(){

    $(".he").click(function(){
      $("#div").show();
          $("#tanchu").show();        
    });
    $(".clo").click(function(){
          $("#div").hide();
          $("#tanchu").hide();
    });
   $("#tanchu").css({"left":$(document.body).width()/2-150,"top":$(document.body).height()/2-150});
})

</script>

可以不用jquery。上面的这段代码有个缺点就是页面可以滑动的时候 只能覆盖当前的整个页面，向下滑后就盖不住了。 不过可以设置$(document.body).css("overflow","hidden")/("overflow","visible");

ie不兼容