登陆框弹出

登陆代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0085)http://www.17sucai.com/preview/51168/2013-11-10/%E7%99%BB%E9%99%86%E6%A1%86/demo.html -->
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>jquery点击弹出登陆窗口</title>

<link rel="stylesheet" type="text/css" href="./jquery点击弹出登陆窗口_files/style.css">
<script type="text/javascript" src="./jquery点击弹出登陆窗口_files/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function($){

	$('.theme-login').click(function(){
		$('.theme-popover-mask').show();
		$('.theme-popover-mask').height($(document).height());
		$('.theme-popover').slideDown(200);
	})
	$('.theme-poptit .close').click(function(){
		$('.theme-popover-mask').hide();
		$('.theme-popover').slideUp(200);
	})

});
</script>
	
</head>

<body>
<div class="theme-buy">
	<a class="btn btn-primary theme-login" href="javascript:;">点击查看效果</a>
</div>

<div class="theme-popover-mask"></div>

<div class="theme-popover">
	<div class="theme-poptit">
		<a href="javascript:;" title="关闭" class="close">×</a>
		<h3>登录 是一种态度</h3>
	</div>
	<div class="theme-popbod dform">
		<form class="theme-signin" name="loginform" action="" method="post">
			<ol>
				<li><h4>你必须先登录！</h4></li>
				<li><strong>用户名：</strong><input class="ipt" type="text" name="log" value="17sucai" size="20"></li>
				<li><strong>密码：</strong><input class="ipt" type="password" name="pwd" value="***" size="20"></li>
				<li><input class="btn btn-primary" type="submit" name="submit" value=" 登 录 "></li>
			</ol>
		</form>
	</div>
</div>




</body></html>

css

@charset "utf-8";
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% microsoft yahei;}
a{color:#0088DB;text-decoration:none;cursor:pointer}
a:hover{color:#2A5E8E}
/* input */
input{font-size:12px;font-size:100%;font-family:microsoft yahei;outline:none;line-height:normal;color:#444;}
.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: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{box-shadow:#2176D3 0 1px 2px 0 inset;border-color:#3079ED;}
.btn-primary:focus{border-color:#4d90fe;outline:none}

.theme-buy{margin-top:7%;text-align:center;}
.theme-signin{font-size:15px;}
.theme-popover-mask{z-index:1;position:absolute;left:0;top:0;width:100%;height:100%;background:#000;opacity:0.5;filter:alpha(opacity=50);-moz-opacity:0.5;display:none;}
.theme-popover{z-index:9;position:absolute;top:50%;left:50%;width:660px;height:360px;margin:-180px 0 0 -330px;border-radius:5px;border:solid 2px #e4e4e4;background-color:#fff;display:none;box-shadow:0 0 10px #666;background:#fff;}
.theme-poptit{border-bottom:1px solid #ddd;padding:12px;position:relative;height:24px;}
.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;}
.theme-popbod{padding:60px 15px;color:#444;height:148px;}
.dform{padding:80px 60px 40px;text-align:center;}
.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;}

结果