css、js两种方法实现遮罩效果

css实现遮罩

<style tyle="text/css">

.zhezhao{

  z-index:0px;                                                                   层深度          

 

 position:absolute;//必须为绝对定位

 left:50px;

 top:50px;                                                                      位置及大小     

 width:200px;

 height:400px;

 

 background-color: #191919;

  filter: Alpha(Opacity=70);
  opacity: 0.7;                                                                 遮罩颜色及程度
 -moz-opacity: 0.7;

   }

 

.content{

z-index:1px;                                                                   

}

</style>

<div class="zhezhao"><div class="content">ok！</div></div>

 

 

js实现遮罩

 

<style type="text/css">

 

.content{z-index:1px;  }

</style>

 

<script type="text/javascript">

 

function dG(id)

{

return document.getElementById(id);

}

 

function cE(id)

{

return document.createElementById(id);

}

//创建显示遮照层
function createZheZhao() {
    if (dG("cover_id")) {//有遮照层
        dG("cover_id").style.display = "block";
    }
    else {//否则创建遮照层
        var coverDiv = cE("div");
        document.body.appendChild(coverDiv);
        coverDiv.id = "cover_id";
        with (coverDiv.style) {
            position = 'absolute';
            background = '#CCCCCC';
            var bodysize = getBodySize();
            left = '0px';
            top = '0px';
            height = bodysize[1];
            width = bodysize[0];
            zIndex = 0;
        }
    
    
     
    }
}

//获取窗体的长、宽 

function getBodySize() {
    var bodySize = [];
    with (document.documentElement) {
        bodySize[0] = (scrollWidth > clientWidth) ? scrollWidth : clientWidth;
        bodySize[1] = (scrollHeight > clientHeight) ? scrollHeight : clientHeight;
    }
    return bodySize;
}

 

 

function quxiao()

{

 dG("cover_id").style.display = "none";

}

</script>