div+javascript实现半透明遮盖层
效果:点击按钮页面中间弹出一个div,div下面的页面不可操作。
全部源码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
<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";
$("blockUI").style.height = LoginUI.getViewportHeight() + LoginUI.getViewportScrollY() + "px";
}
LoginUI.hideLogin = function()
{
$("blockUI").style.display="none";
$("Login").style.display="none";
}
</script >
</head >
<body >
<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" / >
</body >
</html >