[Thùng rác] Đăng nhập với LightBox

[Tut] Đăng nhập với LightBox
Viết bởi: Kirigaya Kazuto
Tham khảo trên mạng về một số JQuery và LightBox để tạo thành sản phẩm

Demo:
[Only admins are allowed to see this image]

B1: APC >> Display >> Templates >> over_header: Chèn code này vào chỗ muốn hiển thị

Code:


<!-- BEGIN switch_user_logged_out -->
<div id="IFche" onclick="IFlogin()" style="display:none"></div>
<div id="IFbanglogin" onclick="IFlogin();">Đăng Nhập</div><div id="IFlogin" style="display:none">  
<img src="http://2img.net/i/fa/empty.gif" class="closebutton" width="20px" height="20px" onclick="IFlogin();" />        
<h1>Đăng Nhập</h1><form action="/login">      
<dl><dt><label for="username">Tài Khoản</label></dt>
<dd><input type="text" name="username" size="25" /></dd>
<dt><label for="password">Mật Khẩu</label></dt>
<dd><input type="password" name="password" size="25" /></dd>
<dt><br /><center><input type="checkbox" name="autologin" checked="checked" /> Ghi nhớ đăng nhập</center></dt>
</dl><div style="clear:left"></div>      
<input type="submit" class="login-submit" name="login" value="Đăng Nhập" />          
<input name="redirect" type="hidden" value=""></form></div>
<script type="text/javascript">
           function IFlogin() {
             var x = document.getElementById('IFlogin');  
              if (x.style.display == 'none') {  
                jQuery(x).add('#IFche').fadeIn('slow');  
                var r = x.getElementsByTagName('form')[0].redirect;  
                r.value = window.location.href;
             }
             else {  
                jQuery(x).add('#IFche').fadeOut('slow');
             }
           }
           jQuery(function () {
              if (document.getElementById('logout')) document.getElementById('IFbanglogin').style.display = 'none';
           });
</script>
<!-- END switch_user_logged_out -->

B2: Vào CSS chèn đoạn này:

Code:

#IFche{position:fixed;top:0;left:0;min-height:101%;width:100%;background-color:#000;opacity:0.7;filter:Alpha(opacity=70);z-index:999}
#IFlogin{background:#fff;color:rgb(0, 99, 220);left:25%;position:fixed;top:30%;width:40%;z-index:999;text-shadow:0 1px 1px white;color:rgb(0, 99, 220)}
#IFlogin h1{background:rgb(217, 229, 240);margin-top:0;padding:8px 10px;text-align:left;border-bottom:1px solid rgb(0, 99, 220); color:rgb(0, 99, 220);}
#IFlogin form{margin:10px auto;width:90%}
#IFlogin img.closebutton{float:right;margin:10px;background:url('http://i57.servimg.com/u/f57/16/18/15/10/delete10.png') no-repeat; width:20px; height:20px; cursor:pointer}
#IFlogin ul{list-style-type:none}
#IFlogin ul li{float:left;width:50%;font-size:1.2em}
#IFlogin li input{padding:4px;background:#fff;border:1px solid rgb(0, 99, 220);border-radius:3px;}
#IFlogin .login-submit{display:block;margin:15px auto;background:rgb(217, 229, 240);border:1px solid rgb(0, 99, 220);color:rgb(0, 99, 220);padding:5px 10px;font-weight:bold;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;cursor:pointer}
#IFlogin .login-submit:hover{color:#AAA}
#IFbanglogin{background:rgb(217, 229, 240);border:1px solid rgb(0, 99, 220);color:rgb(0, 99, 220);font-weight:bold;font-size:1.4em;padding:5px;border-radius:2px;width:95px;cursor: pointer;}

Nguồn: [Only admins are allowed to see this link]

thường thì chèn vào chổ nào trong head vậy thớt, ví dụ như cái head của 9x thì chèn chổ mô ?

Trông được đấy ;d
Kaz cho méo đem về xài hen :v
Mà lần sau viết đại nó tiếng Việt đi, tự dưng ghi "write by" là cái gì :v

CSS có vài đoạn thừa.
Không nên dùng br và center.
Thuộc tính for của label phải tương ứng với id của input.
input redirect không nhận được giá trị của location hash, nên chỉ cần lấy window.location.pathname là đủ.
Kích hoạt form login nên dùng liên kết đến trang login, phòng trường hợp người dùng không bật javascript.
P/s: Lỡ dùng jQ thì sài luôn jQ cho gọn :)

Code tham khảo:

Code:

<a id="iFlogin" href="/login">Đăng Nhập</a>
<div id="iFoverlay" style="display:none"></div>
<div id="iFform" style="display:none">
   <img src="http://2img.net/i/fa/empty.gif" id="iFclose" width="20px" height="20px" />
   <h1>Đăng Nhập</h1>
   <form action="/login" method="post">
      <dl>
         <dt>Tài Khoản</dt>
         <dd>
            <input type="text" name="username" size="25" />
         </dd>
      </dl>
      <dl>
         <dt>Mật Khẩu</dt>
         <dd>
            <input type="password" name="password" size="25" />
         </dd>
      </dl>
      <dl>
         <dt></dt>
         <dd>
            <input name="redirect" type="hidden" value="" />
            <input type="submit" class="login-submit" name="login" value="Đăng Nhập" />
            <input type="checkbox" name="autologin" checked="checked" />Ghi nhớ?
         </dd>
      </dl>
   </form>
</div>
<script type="text/javascript">
   jQuery(function ($) {
      $("#iFform input[name='redirect']").val(location.pathname);
      $("#iFlogin, #iFoverlay, #iFclose").click(function (event) {
         event.preventDefault();
         $("#iFoverlay, #iFform").fadeToggle();
      });
   });
</script>

Vì dùng CSS là đủ rồi, ngoài ra thẻ center không hỗ trợ trong html5.
Có một số tag có thể dùng được nhưng không thích hợp, ví như lúc đầu em dùng ul và li vậy.