登陆代码
<!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;}
结果
