遮 罩 层 的 实 现

CSS代码
<!--遮罩层的css样式-->
#overlay {
    background: #000;
    filter: alpha(opacity=50); /* IE的透明度 */
    opacity: 0.5;  /* 透明度 */
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 100; /* 此处的图层要大于页面 */
    display:none;
}
<!--登陆最外边的大div的css-->
#load{
    position:absolute;

    top:50%;

    left:50%;
    z-index:-1;
    width: 300px;
    z-index: 200;
    height: 230px;

    margin: -150px 0 0 -150px;

    background:white;
    border-radius: 2px;;
    vertical-align: middle;
    display:none;
}
<!--表单的css-->（需要自己修改）
#message{
    color:rebeccapurple;
    text-align: center;
    width: 300px;
    height:180px;
}
<!--按钮的css-->
#button{
    width: 300px;
    height: 50px;
    background:orange;
    border: none;
}

boday代码
<!--登陆框-->
<div id="load">
<form>
<!--表单框-->
<div id="message"><div id="texts">表单</div></div>
<!--登陆按钮-->
<div ><input type="button" οnclick="hideOverlay()" id="button" value="确定"></div>
</form>
</div>
<!--遮罩框-->
<div id="overlay"></div>

JQUERY 代码
<script>
/* 显示遮罩层 */
function showOverlay(){
$("#load").show()
$("#overlay").css("width",$(document).width())
$("#overlay").css("height",$(document).height()) 

// fadeTo第一个参数为速度，第二个为透明度
        // 多重方式控制透明度，保证兼容性，但也带来修改麻烦的问题
$("#overlay").fadeTo(200, 0.5);
    }
/* 隐藏覆盖层 */
function hideOverlay() {
$("#overlay").fadeOut(200);
$("#load").hide()
    }
</script>