HTML-简单的遮罩层实现

CSS部分

<style type="text/css">
#mask
{
    display:none;
    background-color:#000;
    width:100%;
    height:100%;
    top:0;
    left:0;
    position:absolute;
    opacity:0.5;
    /*兼容IE8及以下版本浏览器*/
    filter: alpha(opacity=30);
    z-index:1001;
}

#model
{
    width:600px;
    height:600px;
    background-color:white;    
    margin:auto;
    position:absolute;
    z-index:1003;
    top:0;
    left: 0;
    display:none;
    border: 1px solid rgba(0, 0, 0, 0.2);   
    box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.5);
    border-radius: 6px;
}
#model a
{
    font-size: 18px;
    float:right;
    color: red;
    margin: 10px;
}
</style>

js部分

function showDiv()
{  

    $("#model").css('top',(getWindowInnerHeight() - $("#model").height()) / 2 + 'px');   
    $("#model").css('left',(getWindowInnerWidth() - $("#model").width()) / 2 + 'px'); 

    var s = document.getElementById("mask");
    s.style.display = "block";

    var l = document.getElementById("model");
    l.style.display = "block";

}

function colseDiv()
{  
    var s = document.getElementById("mask");
    s.style.display = "none";

    var l = document.getElementById("model");
    l.style.display = "none";

}

// 浏览器兼容 取得浏览器可视区高度   
function getWindowInnerHeight()
{   
    var winHeight = window.innerHeight   
            || (document.documentElement && document.documentElement.clientHeight)   
            || (document.body && document.body.clientHeight);   
    return winHeight;   

}   

// 浏览器兼容 取得浏览器可视区宽度   
function getWindowInnerWidth()
{   
    var winWidth = window.innerWidth   
            || (document.documentElement && document.documentElement.clientWidth)   
            || (document.body && document.body.clientWidth);   
    return winWidth;   

}   

HTML部分

<div id="mask">
</div>
<div id="model">
    <span><a href="javascript:colseDiv();">关闭</a></span>
</div>