设置登录弹出层效果

点击登录按钮，跳出弹出层，背景被虚化，跳出的弹出层是单纯的图片，点击图片上的关闭按钮，关闭弹出层，并且可以通过点击弹出层之外的区域实现弹出层的自动关闭

body里面的主体内容

    <!-- hideFocus隐藏聚焦，具有使对象聚焦失效的功能
    如果没有hideFocus，那么鼠标点击超链接，则外面出现一个虚线框，即为聚焦，使用了hideFocus则不会有虚线框 -->
      <button id="btnLogin" hidefocus="true" class="login-btn">登录</button>

设置CSS样式：

增加了两个节点的样式，这两个节点是在点击按钮后生成的。

/* 设置关闭按钮的摆放位置 */
#close{ 
	/* 关闭按钮放置的地方 */
	background:url(img/close.png) no-repeat; 
	width:30px; 
	height:30px; 
	cursor:pointer; 
	position:absolute; 
	right:5px; 
	top:15px; 
	/* 缩进 */
	text-indent:-999em;
	}
	/* 增加的第一个节点 */
#mask{ 
	/* 设置灰色背景区域 */
	background-color:#ccc;
	opacity: 0.5;
	filter: alpha(opacity=50); 
	position:absolute; 
	left:0;
	top:0;
	z-index:1000;
	}
	/* 增加的第二个节点 */
#login{ 
	position:fixed;
	z-index:1001;
	}
	/* 设置背景图片 */
.loginCon{ 
	position:relative; 
	/* 背景图片的大小 */
	width:670px;
	height:380px;
	background:url(img/loginBg.png) #2A2C2E center center no-repeat;
	}

javascript特效：

function openNew(){
	//获取页面的高度和宽度
	var sWidth=document.body.scrollWidth;
	var sHeight=document.body.scrollHeight;
	
	//获取页面的可视区域高度和宽度
	var wHeight=document.documentElement.clientHeight;
	// 为页面添加了两个节点
	var oMask=document.createElement("div");
		oMask.id="mask";
		oMask.style.height=sHeight+"px";
		oMask.style.width=sWidth+"px";
		document.body.appendChild(oMask);
	var oLogin=document.createElement("div");
		oLogin.id="login";
		oLogin.innerHTML="<div class='loginCon'><div id='close'>点击关闭</div></div>";
		document.body.appendChild(oLogin);
	
	//获取登陆框的宽和高
	var dHeight=oLogin.offsetHeight;
	var dWidth=oLogin.offsetWidth;
	//设置登陆框的left和top
	oLogin.style.left=sWidth/2-dWidth/2+"px";
	oLogin.style.top=wHeight/2-dHeight/2+"px";
	//点击关闭按钮
	var oClose=document.getElementById("close");
	
	//点击登陆框以外的区域也可以关闭登陆框
	oClose.οnclick=oMask.οnclick=function(){
		document.body.removeChild(oLogin);
		document.body.removeChild(oMask);
			};
		};
					
	window.οnlοad=function(){
		var oBtn=document.getElementById("btnLogin");
			//点击登录按钮
			oBtn.οnclick=function(){
			openNew();
			return false;
					}
		}