遮盖效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
<style type="text/css" >
/* LoginUI*/
.hidden { display: none;}
.popup{position: absolute;width: 450px; z-index: 60000;}
.container{ border: 5px solid #333;width: 445px;background: white;height:400px;}
</style >

<script type="text/javascript" >

    var LoginUI = !!window.LoginUI || {};
$ = function(id){return document.getElementById(id)}
//获得宽度 
LoginUI.getViewportWidth = function () {
    var width = 0;
    if (document.documentElement && document.documentElement.clientWidth) {
        width = document.documentElement.clientWidth;
    }
    else if (document.body && document.body.clientWidth) {
        width = document.body.clientWidth;
    }
    else if (window.innerWidth) {
        width = window.innerWidth - 18;
    }
    return width;
}

//获得高度
LoginUI.getViewportHeight = function () {
    var height = 0;
    if (window.innerHeight) {
        height = window.innerHeight - 18;
    }
    else if (document.documentElement && document.documentElement.clientHeight) {
        height = document.documentElement.clientHeight;
    }
    else if (document.body && document.body.clientHeight) {
        height = document.body.clientHeight;
    }
    return height;
}

LoginUI.getViewportScrollY = function () {
    var scrollY = 0;
    if (document.documentElement && document.documentElement.scrollTop) {
        scrollY = document.documentElement.scrollTop;
    }
    else if (document.body && document.body.scrollTop) {
        scrollY = document.body.scrollTop;
    }
    else if (window.pageYOffset) {
        scrollY = window.pageYOffset;
    }
    else if (window.scrollY) {
        scrollY = window.scrollY;
    }
    return scrollY;
}

//遮盖层长度、宽度设置
LoginUI.centerDiv = function (div) {
    var top = ((LoginUI.getViewportHeight() - div.offsetHeight) / 2);
    if (top < 0) top = 10;
    div.style.left = ((LoginUI.getViewportWidth() - div.offsetWidth) / 2) + "px";
    div.style.top = top + LoginUI.getViewportScrollY() + "px";
}

//遮盖层显示
LoginUI.showLogin = function()
{
$("Login").className = "popup container";
$("Login").style.display="block";
LoginUI.centerDiv($("Login"));
$("blockUI").style.display="block";
alert(document.body.clientHeight);
$("blockUI").style.height = window.document.body.clientHeight + "px";
//$("blockUI").style.height = LoginUI.getViewportHeight() + LoginUI.getViewportScrollY() + "px";
}
//遮盖层隐藏
LoginUI.hideLogin = function () {
  $("blockUI").style.display = "none";
   $("Login").style.display = "none";
}

  </script>
 </head>

 <body>
<div style="height:1000px">
<div id="blockUI" style="display: none; background-color: black; width: 100%; height: 1000px; position: absolute; left: 0px; top: 0px; z-index: 50000; -moz-opacity: 0.5; opacity: 0.5;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=50)';filter:alpha(opacity=50);" onclick="return false" onmousedown="return false" onmousemove="return false" onmouseup="return false" ondblclick="return false" >
 
</div >
<div id="Login" class="popup container hidden" ><a href="#" onclick="LoginUI.hideLogin()"
                margin-top: -33px; margin-right: 10px;" >[关闭]</a ></div >
<input type="button" onclick="LoginUI.showLogin()" value="Login In" / >
</div>
 </body>
</html>
posted on 2013-03-29 16:32 朝着阅读(130) 评论(0) 收藏举报