JavaScript登录成功提示弹出窗口 js点击登录弹出登录框

js实现弹窗登录验证

1.CSS隐藏的弹窗块

<style>
#notClickDiv{
	filter:alpha(Opacity=35);opacity:0.35;		/*设置不透明度为35%*/
	background:#000000;						/*设置背景为黑色*/
	position:absolute;							/*设置定位方式为绝对位置*/
	display:none;								/*设置该<div>标记显示*/
	z-index:9;									/*设置层叠顺序*/
	top:0px;									/*设置顶边距*/
	left:0px;									/*设置左边距*/
	margin: 0px;
	padding: 0px;
}

#login{
	position:absolute;	/*设置布局方式*/
	width:280px;		/*设置宽度*/
	padding:4px;		/*设置内边距*/
	height:156px;		/*设置高度*/
	display:none; 		/*设置显示方式*/
	z-index:10;					/*设置层叠顺序*/
	background-color:red;	/*设置背景颜色*/
}
</style>

2.js显示登录弹窗

<script language="javascript">

//居中显示用户页面
function Myopen(divID){ 								//根据传递的参数确定显示的层
     var notClickDiv=document.getElementById("notClickDiv");	//获取id为notClickDiv的层
	 notClickDiv.style.display='block';						//设置层显示
	 notClickDiv.style.width=document.body.clientWidth;
	 notClickDiv.style.height=document.body.clientHeight;
      document.getElementById(divID).style.display='block';							//设置由divID所指定的层显示	 
      document.getElementById(divID).style.left=(document.body.clientWidth-240)/2;		//设置由divID所指定的层的左边距
      document.getElementById(divID).style.top=(document.body.clientHeight-139)/2;		//设置由divID所指定的层的顶边框
}

//隐藏用户登录页面
function myClose(divID){
	divID.style.display='none';			//设置id为login的层隐藏
     //设置id为notClickDiv的层隐藏
	 document.getElementById("notClickDiv").style.display='none';	
}

function loginSubmit(form2){
	if(form2.username.value==""){		//验证用户名是否为空
		alert("请输入用户名！");form2.username.focus();return false;
	}
	if(form2.pwd.value==""){		//验证密码是否为空
		alert("请输入密码！");form2.pwd.focus();return false;
	}	
	var param="username="+form2.username.value+"&pwd="+form2.pwd.value; 	//将登录信息连接成字符串，作为发送请求的参数
	var loader=new net.AjaxRequest("UserServlet?action=login",deal_login,onerror,"POST",encodeURI(param));
}
function onerror(){
	alert("您的操作有误");
}
function deal_login(){
	/*****************显示提示信息******************************/
	var h=this.req.responseText;
	h=h.replace(/\s/g,"");	//去除字符串中的Unicode空白
	alert(h);
	if(h=="登录成功,哈哈！"){
		window.location.href="DiaryServlet?action=listAllDiary";
	}else{
		form2.username.value="";//清空用户名文本框 
		form2.pwd.value="";//清空密码文本框
		form2.username.focus();//让用户名文本框获得焦点
	}
	
}
</script>

3.实现登录

<!-- 点击登录，注册时跳出页面 -->
<div id="notClickDiv"></div>
<!-- 设置背景图片与长宽 -->
<div id="top"></div>
<!-- 设置导航条样式 -->
<div id="navigation">
<div style="float:left;color:#006700;">
	<c:if test="${!empty sessionScope.userName}">		
		<b>   》  欢迎 ${sessionScope.userName} 登录九宫格日记网！</b>
	</c:if>
	<c:if test="${empty sessionScope.userName}">		
		<b>   》  欢迎光临九宫格日记网！</b>
	</c:if>
	</div>
	
	<!-- text-align: right 设置字体向右对齐 -->
	<div style="float:right;text-align: right;">
		<a href="DiaryServlet?action=listAllDiary">首页</a> 
	<c:if test="${empty sessionScope.userName}">	
		  |  <a href="#" onClick="Myopen('login')">登录</a>
		  |  <a href="#" onClick="Regopen('register')">注册</a>
		  |  <a href="forgetPwd_1.jsp">找回密码</a>	 
	</c:if>
	<c:if test="${!empty sessionScope.userName}">		
		 |  <a href="DiaryServlet?action=listMyDiary">我的日记</a>
		  |  <a href="writeDiary.jsp">写九宫格日记</a>
		  |  <a href="UserServlet?action=exit">退出登录</a>
	</c:if>
	</div>

</div>

4.隐藏的登录窗口

<!-- login:层叠，不显示 -->
 <div id="login">
<form name="form2" method="post" action="" id="form2">
	<div id="loginTitle">清爽夏日九宫格日记网--用户登录</b></div>
	<div id="loginContent" style="background-color:#FFFEF9; margin:0px;">
	<ul id="loginUl"><li>
	
	<!-- 当在选中并按下键盘键时触发，如果按下的是回车键，表单form1中的文本框PWD获得光标 enter键的ASCII是13。 -->
	<!-- 第一个 this 指的是html控件本身，即文本输入框，这里是显示文本框的输入内容，所以传的是this。第一个 this 其实也指的是html控件本身，即按钮，this.form指的是这个按钮所在的form，因为处理form数据是要通过form来取得数据，所以了里传的是this.form -->
	用户名：<input type="text" name="username" style="width:120px" onkeydown="if(event.keyCode==13){this.form.pwd.focus();}">
	</li><li>
	密    码：<input type="password" name="pwd"  style="width:120px" onkeydown="if(event.keyCode==13){loginSubmit(this.form)}"> <a href="forgetPwd_1.jsp">找回密码</a>
	</li><li style="padding-left:40px;">
	<input name="Submit" type="button"  onclick="loginSubmit(this.form)" value="登录">
       
        <input name="Submit2" type="button" value="关闭" onClick="myClose(login)">
	</li></ul>
	</div>
 	<div style="background-color:#FEFEFC;height:10px;"></div>
</form>
 </div>