用js和css实现遮盖半透明层

最近我做一个项目需要做一个遮盖半透明层。需求就是可以看到层后面的内容，但是不能点击层后面的链接和文本。本来这个问题用两个层z-index很容易解决了。创建两个层。一个为背景层，属性为半透明

opacity:0.50;filter:alpha(opacity=50);z-index=998;

一个为内容层。属性为

position:fixed;z-index:999;

这样在其他的ff以及一些主流的浏览器都是可以显示的。也是非常完美的。但是在ie6下就有问题。ie6不支持fixed属性。对z-index的支持也不是很好。怎么调试也没有用。后来我在网上找了很多种方法。无非就是js和css两种结合实现对ie6的支持。我找了三种方法。在ie6完美实现。当然在ff等也是可以的。
第一种方式。用z-index和js来实现。

<style> 
html,body{
     height:100%;overflow:hidden;} 
body,div,h2{
     margin:0;padding:0;} 
body{
     font:12px/1.5 Tahoma;} 
center{
     padding-top:10px;} 
button{
     cursor:pointer;} 
#b{
     position:absolute;top:0;left:0;width:100%;height:100%;background:#000;opacity:0.5;filter:alpha(opacity=50);display:none;} 
#a{
     position:absolute;top:50%;left:50%;width:400px;height:200px;background:#fff;border:4px solid #f90;margin:-102px 0 0 -202px;display:none;} 
h2{
     font-size:12px;text-align:right;background:#FC0;border-bottom:3px solid #f90;padding:5px;} 
h2 span{
     color:#f90;cursor:pointer;background:#fff;border:1px solid #f90;padding:0 2px;} 
</style> 
<script> 
window.onload = function () 
{
      
    var oWin = document.getElementById("a"); 
    var oLay = document.getElementById("b"); 
    var oBtn = document.getElementsByTagName("button")[0]; 
    var oClose = document.getElementById("close"); 
    oBtn.onclick = function () 
    {
      
        oLay.style.display = "block"; 
        oWin.style.display = "block" 
    }; 
    oClose.onclick = function () 
    {
      
        oLay.style.display = "none"; 
        oWin.style.display = "none" 
    } 
}; 
</script> 
<div id="b"></div> 
<div id="a"><h2><center>标题</center><span id="close">×</span></h2><center>正文内容</center>