jquery +css 自定义登录框

效果展示：

自定义登录框样式文件（dialog.css）

/* input */ 
.ipt { 
	border: solid 1px #d2d2d2; 
	border-left-color: #ccc; 
	border-top-color: #ccc; 
	border-radius: 2px; 
	box-shadow: inset 0 1px 0 #f8f8f8; 
	background-color: #fff; 
	padding: 4px 6px; 
	height: 21px; 
	line-height: 21px; 
	color: #555; 
	width: 180px; 
	vertical-align: baseline; 
} 
.ipt-mini { 
	width: 140px; 
	padding: 1px 3px; 
} 
.ipt:focus { 
	border-color: #95C8F1; 
	box-shadow: 0 0 4px #95C8F1; 
} 
/* btn */ 
.btn { 
	position: relative; 
	cursor: pointer; 
	display: inline-block; 
	vertical-align: middle; 
	font-size: 12px; 
	font-weight: bold; 
	height: 27px; 
	line-height: 27px; 
	min-width: 52px; 
	padding: 0 12px; 
	text-align: center; 
	text-decoration: none; 
	border-radius: 2px; 
	border: 1px solid #ddd; 
	color: #666; 
	background-color: #f5f5f5; 
	background: -webkit-linear-gradient(top, #F5F5F5, #F1F1F1); 
	background: -moz-linear-gradient(top, #F5F5F5, #F1F1F1); 
	background: linear-gradient(top, #F5F5F5, #F1F1F1); 
} 
input.btn { 
	height: 29px; 
} 
.btn:hover { 
	border-color:#c6c6c6; 
	color:#333; 
	background-color:#f8f8f8; 
	background:-webkit-linear-gradient(top, #f8f8f8, #f1f1f1); 
	background:-moz-linear-gradient(top, #f8f8f8, #f1f1f1); 
	background:linear-gradient(top, #f8f8f8, #f1f1f1); 
	box-shadow:#ddd 0 1px 1px 0; 
} 
.btn:active, .btn.btn-active { 
	box-shadow:#ddd 0 1px 2px 0 inset; 
	border-color:#c6c6c6; 
} 
.btn:focus { 
	border-color:#4d90fe; 
	outline:none 
} 
.btn-primary { 
	border-color: #3079ED; 
	color: #F3F7FC; 
	background-color: #4D90FE; 
	background: -webkit-linear-gradient(top, #4D90FE, #4787ED); 
	background: -moz-linear-gradient(top, #4D90FE, #4787ED); 
	background: linear-gradient(top, #4D90FE, #4787ED); 
} 
.btn-primary:hover { 
	border-color:#2F5BB7; 
	color:#fff; 
	background-color: #4D90FE; 
	background: -webkit-linear-gradient(top, #4D90FE, #357AE8); 
	background: -moz-linear-gradient(top, #4D90FE, #357AE8); 
	background: linear-gradient(top, #4D90FE, #357AE8); 
} 
.btn-primary:active, .btn-primary.btn-active { 
	box-shadow:#2176D3 0 1px 2px 0 inset; 
	border-color: #3079ED; 
} 
.btn-primary:focus { 
	border-color:#4d90fe; 
	outline:none 
} 
/* 代码整理：懒人之家 www.lanrenzhijia.com */ 
.theme-buy { 
	margin-top:10%; 
	text-align: center; 
} 
.theme-gobuy, .theme-signin { 
	font-size: 15px; 
} 
.theme-price { 
	position: relative; 
	bottom: -6px; 
	font-family: microsoft yahei, Arial, Helvetica, sans-serif; 
	margin-right: 20px; 
	font-weight: bold; 
	color: #f60; 
	line-height: 32px; 
	font-size: 24px; 
	display: inline-block; 
} 
.theme-price dfn { 
	font-style: normal; 
	font-size: 18px; 
	margin-right: 2px; 
} 
.theme-desc { 
	padding: 30px; 
} 
.theme-version { 
	padding: 30px; 
} 
.theme-popover-mask { 
	z-index: 9998; 
	position:fixed; 
	top:0; 
	left:0; 
	width:100%; 
	height:100%; 
	background:#000; 
	opacity:0.4; 
	filter:alpha(opacity=40); 
	display:none 
} 
.theme-popover { 
	z-index:9999; 
	position:fixed; 
	top:50%; 
	left:50%; 
	width:660px; 
	height:360px; 
	margin:-180px 0 0 -330px; 
	border-radius:5px; 
	border:solid 2px #666; 
	background-color:#fff; 
	display:none; 
	box-shadow: 0 0 10px #666; 
} 
.theme-poptit { 
	border-bottom:1px solid #ddd; 
	padding:12px; 
	position: relative; 
} 
.theme-popbod { 
	padding:60px 15px; 
	color:#444; 
	height: 148px; 
} 
.theme-popbom { 
	padding:15px; 
	background-color:#f6f6f6; 
	border-top:1px solid #ddd; 
	border-radius:0 0 5px 5px; 
	color:#666 
} 
.theme-popbom a { 
	margin-left:8px 
} 
.theme-poptit .close { 
	float:right; 
	color:#999; 
	padding:5px; 
	margin:-2px -5px -5px; 
	font:bold 14px/14px simsun; 
	text-shadow:0 1px 0 #ddd 
} 
.theme-poptit .close:hover { 
	color:#444; 
} 
.btn.theme-reg { 
	position: absolute; 
	top: 8px; 
	left: 43%; 
	display: none 
} 
.inp-gray, .feed-mail-inp { 
	border:1px solid #ccc; 
	background-color:#fdfdfd; 
	width:220px; 
	height:16px; 
	padding:4px; 
	color:#444; 
	margin-right:6px 
} 
.dform { 
	padding:80px 60px 40px; 
	text-align: center; 
} 
.dform .ipt_error { 
	background-color:#FFFFCC; 
	border-color:#FFCC66 
} 
.dform-tip { 
	display:none; 
	background-color:#080; 
	color:#fff; 
	line-height:42px; 
	margin-top:10px; 
display:; 
	font-size: 14px; 
} 
.dform-tip-errer { 
	background-color: #CF301A; 
} 
.dform-tip a { 
	display: inline-block; 
	padding: 0 20px; 
	margin-left:10px; 
	background-color: #FFE924; 
	color: #CF301A; 
} 
.dform-login { 
	padding:0; 
	height: 270px; 
	overflow: hidden; 
} 
.dform-login iframe { 
	height: 470px; 
	margin-top: -180px; 
} 
.theme-signin { 
	margin: -50px -20px -50px 90px; 
	text-align:left; 
	font-size: 14px; 
} 
.theme-signin h4 { 
	color:#999; 
	font-weight:100; 
	margin-bottom: 20px; 
	font-size: 12px; 
} 
.theme-signin li { 
	padding-left: 80px; 
	margin-bottom: 15px; 
} 
.theme-signin li strong { 
	float: left; 
	margin-left: -80px; 
	width: 80px; 
	text-align: right; 
	line-height: 32px; 
} 
.theme-signin .btn { 
	margin-bottom: 10px; 
} 
.theme-signin p { 
	font-size: 12px; 
	color: #999; 
} 
.theme-desc, .theme-version { 
	padding-top: 0 
}

<script type="text/javascript" 
	src="<%=basePath%>backstage/js/jquery-1.9.0.js"></script> 
<script> 
jQuery(document).ready(function($) { 
	$('.theme-popover-mask').fadeOut(100); 
	$('.theme-popover').slideUp(200); 
	 
	$('#login_in').click(function(){ 
		$('.theme-popover-mask').fadeIn(100); 
		$('.theme-popover').slideDown(200); 
	}) 
	$('.theme-poptit .close').click(function(){ 
		$('.theme-popover-mask').fadeOut(100); 
		$('.theme-popover').slideUp(200); 
	}) 
	}) 
 
</script>