基础 - 蒙版遮盖

蒙版遮盖

<div id="mask"></div>
<div id="showBox">
　　<span id="hideBox">X</span>
</div>

<a id="spark" href="javascript:;">出来吧</a>

#mask {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #CCCCCC;
    z-index: 999;
    display: none;
}  
#showBox {
    position: fixed;
    top: 50%;
    left: 50%;
    margin: -125px 0 0 -200px;
    width: 400px;
    height: 250px;
    background-color: #DDDDDD;
    z-index: 1000;
    display:none;
}
#showBox span {
    position: absolute;
    top: 10px;
    right: 10px;
    font: 400 10px/1.5 "Microsoft YaHei";
    cursor: pointer;
}

window.onload = function () {
    var oMask = window.document.getElementById("mask");
    var oShowBox = window.document.getElementById("showBox");
    var oSpark = window.document.getElementById("spark");
    oSpark.onclick = function () {
        oMask.style.display = "block";
        oShowBox.style.display = "block";
    }
    var oHideBox = window.document.getElementById("hideBox");
    oHideBox.onclick = function () {
        oMask.style.display = "none";
        oShowBox.style.display = "none";
    }
}