简单的js给页面添加遮罩层

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

<html>

<head>
<title>新文件标题</title>
<script type="text/javascript">
    function Ceng() {
        document.getElementById('ceng').style.display = 'block';
        document.getElementById('close').style.display = 'block';
        return false;
    }
    function closeCeng() {
        document.getElementById('ceng').style.display = 'none';
        document.getElementById('close').style.display = 'none';
        return false;
         
    }
     
</script>
</head>
<body>
<a href="#" onclick="Ceng()">点击弹出</a>
<div id="ceng" style="position:absolute;z-index:2;left:0;top:0;right:0;filter:alpha(opacity=50);margin:1px 1px;display:none;width:100%;height:100%;text-align:center;">
</div>
<div id="close" style="position:absolute !important;left:30%;top:0px;z-index:3;border:1px solid #ff6600;margin:100px auto;padding:0px;display:none;width:400px;height:300px;text-align:right">
<a href="#" onclick="closeCeng()">关闭</a>
<div style="text-align:center;"><br>
<br> <a href="#">点击查看 >></a></div>
</div>
</body>
</html>
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　该文转摘出处不详0.0
****************************有时候遮罩层显示不出来，莫捉急，请看下面***********************************
当你的页面中有position:absolute时，咱们的写的position:absolute可能会失效
<div id="ceng" style="position:absolute;z-index:2;left:0;top:0;right:0;filter:alpha(opacity=50);margin:1px 1px;display:none;width:100%;height:100%;text-align:center;">
 
将position:absolute;换成position: fixed;_position: absolute;可能换出现奇迹！！！
 
ps:第一次写，菜鸟刚入手，如有错误请pass
 
 
 
posted @ 2017-04-07 16:48  向_天_笑  阅读(3360)  评论(0)    收藏  举报