效果展示:
点击用户登录超链接:
弹出用户登录对话框
目录结构:
test.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css" media="screen">
#qlogin-con {
display: none;
position: absolute;
z-index: 5000;
left: 450px;
}
#div1 {
display: none;
position: absolute;
z-index: 1000;
background: #7B7B7B;
filter: Alpha(opacity = 30);
}
</style>
<link href="css/guide_q.130605.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!----------------------------------------------------------------------------登录框开始-->
<script>
function openme() {
document.getElementById('qlogin-con').style.display = 'block';
document.getElementById('div1').style.display = 'block';
}
</script>
<div id="div1"
style="width: 1349px; height: 2046px; position: absolute; top: 0; left: 0; -moz-opacity: 0.5; opacity: 0.5; filter: alpha(opacity = 50); background-color: #000; zoom: 1;">
</div>
<div id="qlogin-con" class="part-login">
<div class="mod-left">
<a href="http://bbs.duowan.com/thread-27379829-1-1.html"
target="_blank"><img
src="http://res.udb.duowan.com/img/ad/sdka_d1.jpg" alt="手机令牌内容介绍"
title="手机令牌内容介绍"></a>
</div>
<div class="mod-right">
<div class="mhd">
<div style="position: relative; top: -15px; left: 310px;">
<a href="http://vip.yy.com/vip/activitycenter/index" title="关闭"
style="color: #A7CFEC;">X</a>
</div>
<h2>
YY安全中心<span>统一登录</span>
</h2>
<p>https://udb.yy.com 为YY帐号官方域名 谨防假冒</p>
</div>
<div class="mbd">
<div class="quick-login" id="x-login" style="display: none;">
<h3>检测到您已登录的YY帐号:</h3>
<div class="yy-account-list"></div>
<p class="last">
<a class="q-login-btn" href="javascript:">快速登录</a><a
href="javascript:void(0)" class="login-link">用其他帐号登录</a>
</p>
</div>
<div class="common-login" id="lay_wrap" style="display: block;">
<span id="errorinfo"> <span> <font style="visibility: hidden">请输入验证码 </font>
</span>
</span>
<form id="loginform" name="loginform" action="loginProcess.php"
method="post">
<p>
<input type="text" style="height: 30px;" id="username"
name="name" value="帐号/邮箱"
onFocus="if (value =='帐号/邮箱')value =''"
onBlur="if (value =='')value='帐号/邮箱'"
οnclick="Login4sdk.click4username()" maxlength="50"
class="inputstyle" tabindex="1" style="color: gray;"><a
href="https://udb.yy.com/register.do" target="_blank"
tabindex="5" class="register-btn">注册新帐号</a>
</p>
<p>
<input type="password" id="showpwd" name="password"
style="height: 30px;" tabindex="2" class="inputstyle" ><a
href="https://udb.yy.com/account/forgetPassword2.do"
target="_blank" tabindex="6" class="fpassword">忘了密码? </a> <input
type="hidden" name="oauth_token"
value="bfb289791cad1822d4f4b339e8d230b3f62194093690d"> <input
type="hidden" name="denyCallbackURL"
value="http://vip.yy.com/auth/fail">
</p>
<p id="secid">
<input name="securityCode" class="inputstyle inputstyle1"
id="securityCode" value="" maxlength="8" type="text"
tabindex="3"> <a
href="javascript:Login4sdk.changeSecurityCode();"
title="看不清?换一张" class="changeOne"><img id="imgSecurityCode"
src=""></a>
</p>
<p class="last">
<input value="登 录"
style="background: #4DA5E3; border: 0 none; width: 100px; height: 35px; font-size: 20px; color: #fff;"
id="login_button" type="submit" tabindex="4"><a
href="javascript:void(0)" id="quick-change"
style="display: none;">切换到快速登录</a>
</p>
</form>
</div>
</div>
</div>
</div>
<div class="g-24">
<div class="blank10"></div>
<div class="g-24-6">
<div class="box-cont-s1" id="mod-login">
<div class="center mtl mbm">
<a href="javascript:void(0)" class="pay-st2 fsxxl center"
οnclick="openme()">用户登录</a>
</div>
</div>
</div>
</body>
</html>
guide_q.130605.css
@charset "utf-8";
/* CSS Document */
body,div,ul,li,h1,h2,h3,form,input,button,p{margin:0; padding:0;}
ul{list-style:none;}
img {border:0;}
a{text-decoration:none; outline:none;}
a:hover{text-decoration:none;}
q:before, q:after{content:'';}
body, button, input{font:12px/1.5 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;}
h1 {font-size:18px;}
h2 {font-size:16px;}
h3 {font-size:14px;}
.tou{ background-color:#000;filter:alpha(opacity=50);opacity: 0.5; width:1900px; height:500px; position:absolute; left:0; top:0; z-index:-1;}
.part-login,.mod-right .mhd p,.quick-login p .q-login-btn,.btn-blue-login,#errorinfo,#errorinfo span{background:url(../../img/login_bg.gif) no-repeat;}
.part-login{ width:518px; height:298px; border:1px solid #fff;border-radius:5px; margin:0px auto;box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);-webkit-box-shadow:2px 2px 5px rgba(0,0,0,0.5);-moz-box-shadow:2px 2px 5px rgba(0,0,0,0.5);box-shadow:2px 2px 5px rgba(0,0,0,0.5); background-position:right top; background-color:#f6fafd;}
.mod-left{ width:165px; float:left; overflow:hidden;zoom:1; margin-right:15px;}
.mod-left img{ width:163px; height:298px;border-radius:5px 0 0 5px;}
.mod-right{ float:left; overflow:hidden; width:333px;}
.mod-right .mhd{ padding: 16px 0 0px; overflow:hidden;zoom:1;}
.mod-right .mhd h2{height:34px; line-height:34px; font-family:"微软雅黑"; font-size:20px; color:#0f8ee8; font-weight:normal; background:url(../../img/login_line.png) no-repeat bottom left; padding:0 0 1px 20px;}
.mod-right .mhd h2 span{ font-size:16px; color:#b4b8bf; padding-left:10px;}
.mod-right .mhd p{ background-position: 8px -448px; height:25px; line-height:25px; padding-left:27px;color:#78a0c7;}
.mod-right .quick-login{ overflow:hidden; padding:16px 0 0 10px;zoom:1;}
.mod-right .quick-login h3{ font-size:12px; font-weight:normal; color:#828b9a; padding-bottom:6px;zoom:1;}
.mod-right .quick-login p{ overflow:hidden;zoom:1; margin-bottom:7px; vertical-align:middle; height:18px; line-height:18px;}
.mod-right .quick-login p.last{ height:auto; padding-top:5px;zoom:1;}
.quick-login p label{ vertical-align:middle; color:#545c5f;}
.quick-login p input{ vertical-align:middle; margin-right:4px;}
.quick-login p .q-login-btn,.btn-blue-login{ background-position: 0 -386px; width:100px; height:32px; line-height:32px; text-align:center; display:block; color:#fff; font-size:18px; font-family:"微软雅黑"; text-decoration:none; margin-right:17px; float:left;}
.quick-login p .login-link{ display:inline-block; margin-top:14px; color:#0e9fed; float:left;}
.common-login{ overflow:hidden;zoom:1; padding:32px 0 0 10px; display:none; position:relative;}
.common-login p{zoom:1; margin-bottom:12px; height:28px; line-height:28px;}
.common-login p.last{ height:auto; padding-top:5px;zoom:1; overflow:hidden;}
.common-login .inputstyle{ float:left; width:200px; border:1px solid #d3d6db;border-radius: 3px; padding:4px; color:gray; margin-right:6px; height:18px; line-height:18px;-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;-ms-transition: border linear 0.2s, box-shadow linear 0.2s;-o-transition: border linear 0.2s, box-shadow linear 0.2s;transition: border linear 0.2s, box-shadow linear 0.2s; -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);}
.common-login .inputstyle:focus{ border-color: rgba(82, 168, 236, 0.8);-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);outline:0 none;}
.register-btn{ color:#818d9d; float:left;}
.fpassword{ color:#818d9d;}
.register-btn:hover,.fpassword:hover{ color:#0e9fed; text-decoration:underline;}
.common-login .inputstyle1{ width:100px; float:left;margin-right:14px;}
.changeOne{ float:left; }
.btn-blue-login{ border: 0 none; cursor:pointer; padding-bottom:4px; float:left;}
.common-login p.last a{ float:left; padding-top:9px; color:#0e9fed;}
#errorinfo{ background-position:0 -324px; height:34px; overflow:hidden;zoom:1; display:inline-block; padding-left:17px; position:absolute; left:16px; top:8px; display:none;}
#errorinfo span{background-position:100% -324px; height:34px; overflow:hidden;zoom:1;float:left; display:inline-block; line-height:25px; color:#cc0000; padding-right:13px;font-size:12px;max-width: 276px;}
#errorinfo span font{font:12px/1 Tahoma,Helvetica,Arial,"宋体",sans-serif; line-height:25px;display: block;height: 25px;overflow: hidden;}
#password{display:none;position:absolute;}
.changeOne img{ width:85px; height:26px;}
#secid{display:none;}
.login-close{position: absolute; padding: 0px 10px; top: 3px; right: 2px; font-weight: bold; font-size: 14px;}
.login-close a{color: #A7CFEC;}
.common-login p.rememberCon{ margin-bottom:0px; vertical-align:middle;display:none;}
.common-login p.rememberCon label{ vertical-align:middle;}
.common-login p.rememberCon input{ vertical-align:middle; margin-right:4px;}