花了一天，写了一个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" target="_blank" rel="external nofollow" 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>
DIV弹出式登录窗口 ![学Silverlight 2系列(22)：在Silverlight中用JavaScript调用.NET代码[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)