[Tut] Đăng nhập với LightBoxViết bởi: Kirigaya KazutoTham 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 -->
- 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]