[Code] Bảng đăng nhập và đăng ký nhanh popup 2 trong 1

avatar

Karbyz49233
500
137
Punbb
An toàn
Anh là vô địtt :))
Quản lý viên

Bài viết :
233
Points :
500
Like :
137
Punbb
An toàn
Anh là vô địtt :))

Demo ảnh



Hướng dẫn

Đặt code này ở nơi muốn hiện nút đăng nhập
Code:
<!-- 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
 Trả lời bài viết
avatar

the_dav213
303
44
Punbb
Quản trị
Trảm Phong

Bài viết :
213
Points :
303
Like :
44
Punbb
Quản trị
dùng cái này hay này. nếu ko dùng trình xem ảnh thì dùng cái này nó nhẹ
 Trả lời bài viết
Điểm 4.6/5 dựa vào 87 đánh giá