js+css实现div遮罩层效果

<style type="text/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;}/* 内容层 */.MyAlertBox {    position: absolute;    /*z-index设置元素的堆叠顺序 仅能在定位元素上奏效（例如 position:absolute;）*/    z-index: 200;    width: 520px;    height: 349px;}/* 遮罩层关闭按钮默认样式 */.closeBtn {    position: absolute;    z-index: 300;    width: 35px;    height: 20px;    cursor: pointer;    margin: -146px 220px;    background: url("<%=basePath %>common/imgs/cross_diy.png") no-repeat;}/* 遮罩层关闭按钮 */.closeBtn_hover{    background: url("<%=basePath %>common/imgs/cross_diy_hover.png") no-repeat;}</style>

<script type="text/javascript">/*绑定单击事件*/$(function(){    /*绑定单击事件*/    $("#loginBtn").click(function(){        showOverlay();        adjust("loginFrame");        adjust("closeBtn");    });    /*遮罩层关闭按钮*/    $("#closeBtn").click(function(){        hideOverlay();    });    /*遮罩层关闭按钮*/    $("#closeBtn").hover(function(){        $("#closeBtn").toggleClass("closeBtn_hover");    });    //当浏览器窗口大小改变时    $(window).resize(function () {        adjust("loginFrame");        adjust("closeBtn");    });    //当拉动滚动条时，弹出层和遮罩层跟着移动    $(window).scroll(function () {        adjust("loginFrame");        adjust("closeBtn");        //网页被卷去的左        myleft = $(document).scrollLeft();        //网页被卷去的高        mytop = $(document).scrollTop();        $("#overlay").css({ "left": myleft, "top": mytop });    });});/* 当前页面高度 */function pageHeight() {    //return document.body.scrollHeight;    return window.availHeight;}/* 当前页面宽度 */function pageWidth() {    //return document.body.scrollWidth;    return window.availWidth;}/* 显示遮罩层 */function showOverlay() {    $("#overlay").height(pageHeight());    $("#overlay").width(pageWidth());    // fadeTo第一个参数为速度，第二个为透明度    // 多重方式控制透明度，保证兼容性，但也带来修改麻烦的问题    $("#overlay").fadeTo(200, 0.5);    //为遮罩内容层添加样式    $("#loginFrame").css("display","block");    $("#loginFrame").addClass("MyAlertBox");    //为遮罩层关闭按钮添加样式    $("#closeBtn").css("display","block");    $("#closeBtn").addClass("closeBtn");}/* 隐藏遮罩层 */function hideOverlay() {    $("#overlay").fadeOut(200);    $("#loginFrame").css("display","none");    $("#closeBtn").css("display","none");}//浏览器视口的高度function windowHeight() {    var de = document.documentElement;    return self.innerHeight || (de && de.clientHeight)            || document.body.clientHeight;}//浏览器视口的宽度function windowWidth() {    var de = document.documentElement;    return self.innerWidth || (de && de.clientWidth)            || document.body.clientWidth}/* 浏览器垂直滚动位置 */function scrollY() {    var de = document.documentElement;    return self.pageYOffset || (de && de.scrollTop) || document.body.scrollTop;}/* 浏览器水平滚动位置 */function scrollX() {    var de = document.documentElement;    return self.pageXOffset || (de && de.scrollLeft)            || document.body.scrollLeft;}/* 定位到页面中心 */function adjust(id) {    var w = $("#"+id).width();    var h = $("#"+id).height();    var t = scrollY() + (windowHeight() / 2) - (h / 2);    var l = scrollX() + (windowWidth() / 2) - (w / 2);    $("#"+id).css( {        left : l + 'px',        top : t + 'px'    });}</script>