Jquery实现简单遮罩层

主要分为三个部分 css html js

1 .css 部分代码

    <style type="text/css">     
        .mask {       
                position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;     
                z-index: 1002; left: 0px;     
                opacity:0.5; -moz-opacity:0.5;     
            }     
    </style>    

opacity:0.5;适用于IE， -moz-opacit:0.5;适用于火狐； 解决兼容性问题

2 HTML 部分代码 

    <div id="mask" class="mask"></div>    
    <a href="javascript:;" οnclick="showMask()" >显示遮罩层</a><br />  

3 js 代码部分

    <pre class="html" name="code"><script type="text/javascript">     
        //兼容火狐、IE8   
        //显示遮罩层    
        function showMask(){     
            $("#mask").css("height",$(document).height());     
            $("#mask").css("width",$(document).width());     
            $("#mask").show();     
        }  
        //隐藏遮罩层  
        function hideMask(){     
              
            $("#mask").hide();     
        }  
         
    </script>