DIV弹出式登录窗口

花了一天，写了一个DIV弹出式登录窗口，通过session判断用户是否已经登录，如果用户是首次访问，则直接弹出DIV让用户登录，如果用户已经登录，则登录的DIV不会显示，通过变量isLogin判断用户是否登录，明天继续改进，使用AJAX判断用户输入账号和密码是否正确，这样可以不用刷新整个页面，只要改变DIV状态就行了。OH，YEAH~加油！PS：第一次用这个编辑器，不会用啊-。-

myjs.js
/** 
 * @author Nero  
 * E-mail: [email protected]
 * Created On 2012-04-26 AM 10:31
 */
/* show login window */
function showLogin(){
	var sWidth = 280 ; 					/* window width */
	var sHeight = 215;						/* window height */
	var titleHeight = 26 ;					/* title height */
	var titleBorderColor = "#0073C9"; 
	var titleBgColor = "#65B5CB"; 				/* title bcakground color */
	var borderColor = "#0073C9";
	var bgColor = "#ACD8E5";  					/* window background color */
	var cWidth = document.documentElement.clientWidth; 		/* client's window width */
	var cHeight = document.documentElement.clientHeight; 		/* client's window height */
	
	var bgDiv = document.createElement("div");  	/* create bcakground div , use this div to cover the previous page */
	bgDiv.setAttribute("id","bgDiv");
	bgDiv.style.position="absolute";
	bgDiv.style.top = "0px";
	bgDiv.style.left = "0px"; 			/* the above three lines makes bgDiv align with the upper */
	bgDiv.style.background = "#CCCCCC"; 					/* bgDiv's bgcolor */ 
	bgDiv.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75)";
	bgDiv.style.opacity="0.6"; 					/* set filter */
	bgDiv.style.width = cWidth+"px"; 				/* bgDiv's width equals client's window width */
	bgDiv.style.height = Math.max(document.body.clientHeight,cHeight)+"px"; 
															/* bgDiv's height equals client's window height */
	bgDiv.style.zIndex = "10001"; 				/* set bgDiv's display index, the greater the upper */
	document.body.appendChild(bgDiv); 				/* show bgDiv */
	
	var msgDiv = document.createElement("div"); 			/* create login div , this div show the login window */
	msgDiv.setAttribute("id", "msgDiv");
	msgDiv.style.position = "absolute";
	msgDiv.style.left = (cWidth-sWidth)/2+"px";
	msgDiv.style.top = (cHeight-sHeight)/2 +"px"; 	/* the above three lines makes msgDiv absolute center */
	msgDiv.style.width = sWidth+"px";
	msgDiv.style.height = sHeight+"px";
	msgDiv.style.background = bgColor ;
	msgDiv.style.border = "1px solid "+borderColor;
	msgDiv.style.padding = "1px";
	msgDiv.style.zIndex = "10002";
	document.body.appendChild(msgDiv); 					/* show msgDiv */
	var t1 = document.createElement("table");				/* create new tabel t1*/
	msgDiv.appendChild(t1);
	t1.style.margin = "0px";
	t1.style.padding = "0px";
	t1.style.border = "0px";
	t1.setAttribute("id","t1");
	t1.cellSpacing = 0;						/* set cell spacing 0*/
	var tr1 = t1.insertRow(-1);						/* create one row  */
	var title = tr1.insertCell(-1);					/* insert a cell, this cell put title bar  */
		title.setAttribute("colSpan", "2");
		title.style.width = sWidth+"px";				/* title's width */
		title.style.height = titleHeight + "px";			/* title's height */
		title.style.background = titleBgColor;
		title.style.border = "1px solid "+titleBorderColor;
		title.style.textAlign = "center";
		title.style.font = "bold 14px '宋体'";
		title.style.margin = "0px";
		title.style.padding = "2px;"
		title.style.color = "#FFFFFF";
		title.style.cursor = "move";
		title.innerHTML = "用    户     登     录";			/* title style*/
	
	var moveX = 0 ;
	var moveY = 0 ;
	var moveTop = 0;
	var moveLeft = 0;
	var moveable = false;
	var docMouseMoveEvent = document.onmousemove;		/* rewrite mouse move event */
	var docMouseUpEvent = document.onmouseup;		/* rewrite mouse up event */
	title.onmousedown  = function (){			/* rewrite mouse down event */
		var evt = getEvent();			/* get event object */
		moveable = true ;
		moveX = evt.clientX;			/* get window's now X coordinate */
		moveY = evt.clientY;			/* get window's now Y coordinate */
		moveTop = parseInt(msgDiv.style.top);	/* get now window's distance to TOP */
		moveLeft = parseInt(msgDiv.style.left);	/* get now window's distance to LEFT*/
		
		document.onmousemove = function(){
			if(moveable){
				var evt = getEvent();
				var x = moveLeft + evt.clientX - moveX;
				var y = moveTop + evt.clientY - moveY;
				if (x >0 && (x + sWidth < cWidth ) && y > 0 && ( y + sHeight < cHeight)){
					msgDiv.style.left = x + "px";
					msgDiv.style.top = y +"px";
				}
			}
		};
		document.onmouseup = function(){
			if(moveable){
				document.onmousemove = docMouseMoveEvent;
				document.onmouseup = docMouseUpEvent;
				moveable = false;
				moveX = 0;
				moveY = 0;
				moveTop = 0;
				moveLeft = 0;
			}
		};	
	}
	
	var tr2 = t1.insertRow(-1);						/* create a new row */
	var atd1 = tr2.insertCell(-1);							
		atd1.style.width = (sWidth/3-15) +"px";
		atd1.style.textAlign = "right";
		atd1.style.font = "13px '宋体'";
		atd1.style.color = "#FFFFFF";
		atd1.style.paddingTop = "30px";
		atd1.innerHTML = "账号：";
	var atd2 = tr2.insertCell(-1);
		atd2.setAttribute("id","atd2");
		atd2.style.width = (2*sWidth/3+15)+"px";
		atd2.style.paddingTop = "30px";
	var accountObj = document.createElement("input");
		accountObj.setAttribute("id", "account");
		accountObj.setAttribute("type","text");
		accountObj.setAttribute("value","");
		accountObj.style.border = "1px solid "+borderColor;
		accountObj.style.padding = "0px";
		accountObj.style.margin = "0px";				/* the above creating a account input box */
		accountObj.style.width = "140px";
		document.getElementById("atd2").appendChild(accountObj); 	/* show the input box in row2,td2 */

	var tr3 = t1.insertRow(-1);						/* create a row for input password */	
	var ptd1 = tr3.insertCell(-1);
		ptd1.style.width = (sWidth/3-15)+"px";
		ptd1.style.textAlign = "right";
		ptd1.style.font = "13px '宋体'";
		ptd1.style.color = "#FFFFFF";
		ptd1.style.paddingTop = "30px";
		ptd1.innerHTML = "密码：";
	var ptd2 = tr3.insertCell(-1);
		ptd2.setAttribute("id","ptd2");
		ptd2.style.width = (2*sWidth/3+15)+"px";
		ptd2.style.paddingTop ="30px";
	var passwordObj = document.createElement("input");
		passwordObj.setAttribute("id","password");
		passwordObj.setAttribute("type", "password");
		passwordObj.setAttribute("value", "");
		passwordObj.style.border = "1px solid "+borderColor;
		passwordObj.style.padding = "0px";
		passwordObj.style.margin = "0px";
		passwordObj.style.width ="140px";
		document.getElementById("ptd2").appendChild(passwordObj);	/* show password box */
		
	var tr4 = t1.insertRow(-1);						/* create two buttons */
	var btd1 = tr4.insertCell(-1);
		btd1.setAttribute("id","btd1");
		btd1.setAttribute("colSpan","2");
		btd1.style.paddingTop ="30px";
		btd1.style.width = "100%" ;
		btd1.style.textAlign ="left";
	var buttonObj1 = document.createElement("input");
		buttonObj1.setAttribute("id","button1");
		buttonObj1.setAttribute("type", "button");
		buttonObj1.setAttribute("value","登录");	
		buttonObj1.style.background = titleBgColor;
		buttonObj1.style.border = "1px solid "+titleBorderColor;
		buttonObj1.style.color = "#FFFFFF";
		buttonObj1.style.font = "13px '宋体'";
		buttonObj1.style.width = "54px";
		buttonObj1.style.height = "24px";
		buttonObj1.style.textAlign = "center";
		buttonObj1.style.marginLeft ="68px";
		buttonObj1.setAttribute("onclick","getValue()");/* rewrite onclick event, once mouseclick ,get input value */
		document.getElementById("btd1").appendChild(buttonObj1);/* show button1 */
	var buttonObj2 = document.createElement("input");
		buttonObj2.setAttribute("id","button2");
		buttonObj2.setAttribute("type", "button");
		buttonObj2.setAttribute("value", "取消");
		buttonObj2.style.background = titleBgColor;
		buttonObj2.style.border = "1px solid "+titleBorderColor;
		buttonObj2.style.color = "#FFFFFF";
		buttonObj2.style.font = "13px '宋体'";
		buttonObj2.style.width = "54px";
		buttonObj2.style.height = "24px";
		buttonObj2.style.textAlign = "center";
		buttonObj2.style.marginLeft ="35px";
		buttonObj2.setAttribute("onclick", "resetValue()");		/* reset value */
		document.getElementById("btd1").appendChild(buttonObj2);	/* show button2 */
	
	
    /* compatible with IE and fireFox */
    function getEvent() {
        return window.event || arguments.callee.caller.arguments[0];
    }   
}
function getValue(){
	var account =document.getElementById("account").value.toString();	/* get the value in account */
	var password = document.getElementById("password").value.toString(); 	/* get the value in  password */
	/* create XMLHttpRequest object */
	if(account == ""){
		alert("账号不能为空！");
		document.all('account').focus();
	}else if(password == ""){
		alert("密码不能为空！");
		document.all('password').focus();
	}
	window.location.href = "";}
function resetValue(){
	document.getElementById("account").value = "";
	document.getElementById("password").value = "";
}
function removeDiv(){
	document.body.removeChild("msgDiv");
	document.body.removeChild("bgDiv");
}

index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<%@ page import = "java.io.*" %>
<%@ page import = "javax.servlet.*" %>
<%@ page import = "javax.servlet.http.*" %>
<%@ page import = "java.util.Date" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="/**/css/mycss.css" rel="stylesheet" type="text/css"/>
<script src="/**/js/myjs.js" type="text/javascript" charset="GB2312"></script>
<title>欢迎使用XX后台管理系统</title>
</head>
<body>
	<% 	
		
		Boolean isLogin = (Boolean)session.getAttribute("isLogin");
		if(isLogin == null || !isLogin){
	%>
			<script type="text/javascript">
				window.onload = function(){
					showLogin();
				}
			</script>	
	<%
		}
	%>
	<table>
		<tr>
			<td>
			手液
			</td>
		</tr>
		<tr>
			<td colspan = "2" style = "border:1px solid">
				首次登陆测试
			</td>
		</tr>
		<tr>
			<td>
			5566
			</td>
			<td>
			7788
			</td>
		</tr>
	</table>
</body>
</html>