login.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!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">
<title>Insert title here</title>
<link href="./resources/css/login.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./resources/js/jquery.js"></script>
<script type="text/javascript">
$().ready(function() {
var $login=$("#login");
$login.click(function(){
showMask();
$("#pupPanel").fadeIn("fast");
$("#logonPanel").fadeIn("fast");
verticalCenterWin($("#pupPanel"));
});
})
function showMask() {
var $itxOverlay_header = $("#itxOverlay-header");
$itxOverlay_header.fadeIn('slow', function() {
$(this).fadeTo('normal',0.7);
});
}
/**
* 垂直居中窗体
*
* @param winObj
* 窗体对象
*/
function verticalCenterWin(winObj) {
winObj.css({
left : ($(window).width() - winObj.outerWidth()) / 2,
top : ($(window).height() - winObj.outerHeight()) / 2
});
}
</script>
</head>
<body>
<input id="login" type="button" value="登录" />
<!-- <div><h1>在线笔记本</h1></div>
<form action="loginServlet" method="post" >
<a>Username</a><input type="text" name="name"/><br>
<a>Password</a><input type="password" name="password"/><br>
<input type="submit" value="登陆"/>
</form>-->
<!--登录和注册弹出层-->
<div id="pupPanel" class="modal">
<div class="close">
<a href="javascript:;" title="关闭弹出层按钮"></a>
</div>
<div>
<div class="title">
<h2 id="pop-title">弹出框标题</h2>
</div>
<div class="modalInfo">
<!--登录弹出层-->
<div id="logonPanel" class="infoLogin logonPanel" style="zoom: 1; opacity: 1;">
<form id="userLogonForm" method="post" name="Logon" action="">
登录表单
</form>
</div>
<!--注册弹出层-->
<form id="registerForm" method="post">
<div id="registerUserPanel" class="infoLogin" style="zoom: 1; opacity: 1; display: none;"></div>
</form>
</div>
</div>
</div>
<div id="itxOverlay-header" ></div>
</body>
</html>
login.css
body{
background-image:url(../img/dingzhi_bg2.png);
}
.modal {
position: fixed;
_position: absolute;
padding: 23px 22px;
_width: 1%;
-moz-box-shadow: 2px 3px 20px 1px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 2px 3px 20px 1px rgba(0, 0, 0, 0.5);
box-shadow: 2px 3px 20px 1px rgba(0, 0, 0, 0.5);
padding: 0;
zoom: 1;
opacity: 1;
top: 15%;
left: 30%;
z-index: 1002;
display:none;
background-color: #fff;
}
#itxOverlay-header {
width: 100%;
height: 100%;
background-image: url(../img/translucent.gif);
position: fixed;
top: 0;
left: 0;
opacity: .7;
filter: alpha(opacity = 70);
_filter: alpha(opacity = 70);
-ms-filter: "alpha(opacity=70)";
zoom: 1;
display: none;
z-index: 1001;
-moz-opacity: .7
}
.modalInfo{position:relative}
.infoLogin{width:640px}
关闭弹出层:
$modalClose.click(function() {
$pupPanel.fadeOut('normal');
hiddenMask();
$findPasswordPanel.fadeOut('normal');
});
/**
* 单击事件,Mask 罩盖层被销毁
*/
function hiddenMask() {
var $itxOverlay_header = $("#itxOverlay-header");
$itxOverlay_header.fadeTo('slow', 0, function() {
$itxOverlay_header.hide();
});
};