Demo ảnh
![tuts - [Code] Bảng đăng nhập và đăng ký nhanh popup 2 trong 1 Log10](https://i.servimg.com/u/f35/17/57/29/64/log10.jpg)
Hướng dẫn
Đặt code này ở nơi muốn hiện nút đăng nhậpCode:
<!-- BEGIN switch_user_logged_out -->
<div class="loginpro" style="display: block" id="_Login"><a class="login" href="/login">Đăng nhập</a></div>
<!-- END switch_user_logged_out -->ACP >> Display >> QLTT
Cho code này vào cuối overall_header
Code:
<!-- BEGIN switch_user_logged_out -->
<div style="background-image: url(http://i57.servimg.com/u/f57/16/18/15/10/1225.png); width: 100%; height: 100%; position: fixed; z-index: 999; top: 0px; left: 0px; text-align: center; display: none;" class="loginpop">
<div style="width:500px;height:360px;border:1px solid rgb(222,223,222);background-color:#FFF;position: fixed;top:50%;left:50%;margin-left:-250px;margin-top:-180px;text-align:left">
<div style="background-image:url(http://i57.servimg.com/u/f57/16/18/15/10/1284.png);font:bold 16px Arial;padding:13px;color:rgb(99,101,99);border-bottom:1px solid rgb(239,243,239)">
Đăng nhập tài khoản Ngam9xTG<a style="float:right" href="javascript:more" class="dongloginpop"><img src="http://i57.servimg.com/u/f57/16/18/15/10/1287.png"></a>
</div>
<div style="padding:20px">
<script>$(function(){$(".dongloginpop").click(function(){$(".loginpop").hide()});$('.loginpro a[href*="/login"],.loginpro a[href*="/register"]').click(function( event ) {event.preventDefault();$(".loginpop").css({'display':'inline-block'})});})</script>
<style>
.dang_nhap {float:right;width:240px;font-family:Arial;margin-top:5px}.dang_nhap #username,.dang_nhap #password{width:200px!important;padding:10px 10px 10px 30px;font:16px Arial;margin-bottom:20px;border:1px solid #cccccc}.dang_nhap #username:focus,.dang_nhap #password:focus,.dang_ky #username:focus,.dang_ky #email:focus,.dang_ky #password:focus {border:1px solid rgb(74,142,231)}.pun .dang_nhap input.button2 {width:240px!important;font:bold 16px Arial!important;height:40px!important}.dang_ky {float:left;width:180px;background-color:rgb(247,247,247);padding:10px;height:220px;background-image:url(http://i57.servimg.com/u/f57/16/18/15/10/1286.png);background-repeat:no-repeat;background-position:top center;padding-top:40px}.dang_ky #username,.dang_ky #email,.dang_ky #password{width:140px!important;padding:5px 5px 5px 30px;font:14px Arial;margin-bottom:5px;border:1px solid #b0b0b0}.dang_ky p{margin-bottom:10px;font:bold 14px Arial;color:rgb(99,101,99)}.dang_ky .luuy {color:rgb(99,101,99);font:14px Arial;margin-top:10px}.dang_ky .luuy div{background: url(http://i57.servimg.com/u/f57/16/18/15/10/1285.png)no-repeat left;padding-left:20px}#pwd_bad:before {content:"Không hợp lệ";margin-top:0px;}#pwd_middle:before,#pwd_good:before {content:"Hợp lệ";margin-left:4px;margin-top:5px;}
</style>
<form action="/login" method="post" name="form_login" class="dang_nhap">
<script type="text/javascript">document.write('<input type="hidden" name="redirect" value="' + location.href + '" />')</script>
<input type="text" name="username" id="username" size="15" maxlength="40" placeholder="Tên truy cập" value="" class="inputbox autowidth"><input type="password" id="password" name="password" size="15" maxlength="25" placeholder="Mật khẩu" class="inputbox autowidth">
<div style="font:14px Arial;margin-bottom:10px">
<input type="checkbox" name="autologin" checked="true"> Tự động mỗi khi truy cập
</div>
<input type="submit" name="login" tabindex="6" value="Đăng Nhập" class="button2" style="margin-left:0px">
<div style="font:bold 14px Arial;margin-top:10px;text-align:right">
<a href="/profile?mode=sendpassword" target="_blank">Quên mật khẩu ?</a>
</div>
</form>
<form action="/register?agreed=true&step=2" method="post" target="_blank" name="post" id="ucp" class="dang_ky">
<p>
Tài khoản :
</p>
<input id="username" name="username" value="" placeholder="Bắt buộc" type="text">
<p>
Email :
</p>
<input id="email" name="email" value="" placeholder="" type="text">
<p>
Mật khẩu :
</p>
<input class="left ltr password_reg" placeholder="●●●●●●" type="password" id="password" name="password" value="" size="25" maxlength="25">
<div id="cont_pwd" style="float:right;overflow:hidden;width:60px;height:16px;margin-top:5px;margin-bottom:-5px">
<div class="pwd_img" id="pwd_bad">
Weak
</div>
<div class="pwd_img" id="pwd_middle">
Normal
</div>
<div class="pwd_img" id="pwd_good">
Strong
</div>
</div>
<script src="http://illiweb.com/rs3/85/frm/jquery/pwd_strength/passwordStrengthMeter.js"></script>
<script type="text/javascript">//<![CDATA[
jQuery(document).ready(function(){$('input[name=reset]').click(function(){$("#pwd_good,#pwd_middle,#pwd_bad").hide();});$('.password_reg,#username').keyup(function() {if ( $('.password_reg').val() != "" ){var level = passwordStrength($('.password_reg').val(),$('#username').val());switch(level){case 'bad' :$("#pwd_middle,#pwd_good").hide();$("#pwd_bad").show();break;case 'good' :$("#pwd_good,#pwd_bad").hide();$("#pwd_middle").show();break;case 'strong' :$("#pwd_middle,#pwd_bad").hide();$("#pwd_good").show();break;}}else{$("#pwd_middle,#pwd_good,#pwd_bad").hide();}});});//]]></script>
<input id="profile_field_16_-7" name="profile_field_16_-7" value="1" checked="checked" type="radio" style="display:none"><input class="button2" name="submit" value="Đăng kí" type="submit" style="margin-top:5px">
<div class="luuy">
<div>
Mật khẩu có số và chữ
</div>
</div>
</form>
</div>
</div>
</div>
<!-- END switch_user_logged_out -->Click vào nút đăng nhập nó sẽ hiện ra popup
Tags: #code #tuts
