简易的遮罩层效果

来源:互联网 发布:上海网络推广 编辑:程序博客网 时间:2024/05/17 23:37
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>DIV CSS遮罩层</title>
<pre class="html" name="code">
<script type="text/javascript" src="js/jquery.js">

</script>
<script type="text/javascript">     
    function showMask(){     
        $("#mask").css("height",$(document).height());     
        $("#mask").css("width",$(document).width());     
        $("#mask").show();     
    }  
    //隐藏遮罩层  
    function hideMask(){     
          
        $("#mask").hide();     
    }  
     
</script>  
<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>   
</head>
<body>
<div id="mask" class="mask"></div>    
<a href="javascript:;" onclick="showMask()" >点我显示遮罩层</a><br />  
</body>
</html>
原创粉丝点击