<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="utf-8">
<title>点击文字弹出一个DIV层窗口代码</title>
<style>
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=88);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 55%;
height: 55%;
padding: 20px;
border: 10px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
</head>
<body>
<div id="light" class="white_content" style="background:url(./image/jd.jpg);background-size:100%;">
<a href = "javascript:void(0)" style="top:0px;left:0px" onclick = "closeDialog()">X</a>
<div id="login" align="center" >
<h1 align="center" style="font-size:20px;color:ActiveBorder">用户登录</h1>
<div method="post" align="center" style="font-size:20px">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<br />
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</div>
<a href="yonghuzhuce.aspx" style="font-size:20px;text-align:center;color:white">点击此处注册</a>
</div>
</div>
<div id="fade" class="black_overlay">
</div>
</body>
<script type="text/javascript">
$(function(){
})
function openDialog(){
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block'
}
function closeDialog(){
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none'
}
</script></html>
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" οnkeydοwn="if(event.keyCode==13){this.form.pwd.focus();}">
</li><li>
密 码：<input type="password" name="pwd" style="width:120px" οnkeydοwn="if(event.keyCode==13){loginSubmit(this.form)}"> <a href="forgetPwd_1.jsp">找回密码</a>
</li><li style="padding-left:40px;">
<input name="Submit" type="button" οnclick="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>
-