您现在的位置是:首页 > Web设计

Web设计

div+javascript实现半透明遮盖层

2020-11-21 11:27:15 Web设计 admin
span+javascript实现半透明遮盖层效果:点击按钮页面中间弹出一个span,span下面的页面不可操作。全部源码如下:
span+javascript实现半透明遮盖层
效果:点击按钮页面中间弹出一个span,span下面的页面不可操作。
全部源码如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<styletype="text/css">
/*LoginUI*/
.hidden{display:none;}
.popup{position:absolute;width:450px; z-index:60000;}
.container{ border:5pxsolid#333;width:445px;background:white;height:400px;}
</style>
<scripttype="text/javascript">
varLoginUI=!!window.LoginUI||{};
$=function(id){returndocument.getElementById(id)}
LoginUI.getViewportWidth=function(){
varwidth=0;
if(document.documentElement&&document.documentElement.clientWidth){
width=document.documentElement.clientWidth;}
elseif(document.body&&document.body.clientWidth){
width=document.body.clientWidth;}
elseif(window.innerWidth){
width=window.innerWidth-18;}
returnwidth;
}
LoginUI.getViewportHeight=function(){
varheight=0;
if(window.innerHeight){
height=window.innerHeight-18;}
elseif(document.documentElement&&document.documentElement.clientHeight){
height=document.documentElement.clientHeight;}
elseif(document.body&&document.body.clientHeight){
height=document.body.clientHeight;}
returnheight;
}
LoginUI.getViewportScrollY=function(){
varscrollY=0;
if(document.documentElement&&document.documentElement.scrollTop){
scrollY=document.documentElement.scrollTop;}
elseif(document.body&&document.body.scrollTop){
scrollY=document.body.scrollTop;}
elseif(window.pageYOffset){
scrollY=window.pageYOffset;}
elseif(window.scrollY){
scrollY=window.scrollY;}
returnscrollY;
}


LoginUI.centerDiv=function(span)
{
vartop=((LoginUI.getViewportHeight()-span.offsetHeight)/2);
if(top<0)top=10;
span.style.left=((LoginUI.getViewportWidth()-span.offsetWidth)/2)+"px";
span.style.top=top+LoginUI.getViewportScrollY()+"px";
}
LoginUI.showLogin=function()
{
$("Login").className="popupcontainer";
$("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>
<spanid="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="returnfalse"onmousedown="returnfalse"onmousemove="returnfalse"onmouseup="returnfalse"ondblclick="returnfalse">

</span>
<spanid="Login"class="popupcontainerhidden"><ahref="#"onclick="LoginUI.hideLogin()"
margin-top:-33px;margin-right:10px;">[关闭]</a></span>
<inputtype="button"onclick="LoginUI.showLogin()"value="LoginIn"/>
</body>
</html>