Bảng đăng nhập sử dụng fancybox2

Chức năng:

1. Mở khung đăng nhập ngay tại trang đang xem.
   
2. Sử dụng fancybox2 với hiệu ứng elastic.
   
3. Không chuyển trang sau khi đăng nhập.

Demo: [You must be registered and logged in to see this link.]

Hướng dẫn:
Bước 1: Cài đặt fancybox2. [You must be registered and logged in to see this link.] để xem hướng dẫn.
Bước 2: Thêm vào cuối overall_footer_begin, trước javascript fancybox2
ACP - Display - Templates - Ganeral - overall_footer_begin

Code:

<!-- BEGIN switch_user_logged_out -->
<style type="text/css">
    .fancybox-inner {
        overflow: hidden!important
    }
    #loginFancy {
        width: 305px;
        padding: 0pt ! important;
        margin: -5px -5px -17px
    }
    #loginFancy .user_login_form {
        text-align: left
    }
    #loginFancy p {
        width:269px;
        padding: 5px;
        position: relative
    }
    #loginFancy .mainoption {
        padding: 4px 2px! important;
        border: 0;
        font-style: normal!important;
        font-weight: 500;
        border-radius: 0;
        margin-top: -5px;
    }
    #loginFancy .post {
        position: absolute;
        left: 80px;
        width:90px
    }
    #loginFancy .Rlogin {
        right:0;
        position: absolute
    }
</style>
<div style="display:none">
    <div id="loginFancy">
        <form action="/login" method="post" name="form_login">
            <div class="user_login_form main-box center">
                <p>
                    <label>
                        <span class="genmed" style="">Tài khoản :</span>
                        <input type="text" class="post" size="10" name="username" />
                    </label> 
                    <label class="Rlogin">
                        <input type="checkbox" class="radio" name="autologin" checked="checked" />
                        <span class="gensmall">Ghi nhớ?</span>
                    </label>
                </p>
                <p>
                    <label>
                        <span class="genmed">Mật khẩu : </span>
                        <input type="password" class="post" size="10" name="password" />
                    </label>
                    <label class="Rlogin">
                        <input type="submit" class="mainoption" name="login" value="Đăng nhập" />
                    </label>
                </p>
            </div>
        </form>
    </div>
</div>
<!-- END switch_user_logged_out -->

Đặt javascript này vào cuối javascript fancybox2:

Code:

$("a[href='/login']:not('.message a')").removeAttr("href").attr("href", "#loginFancy");
$("#loginFancy form").append('<input type="hidden" name="redirect" value="' + location.href + '" />');
$("a[href='#loginFancy']").fancybox({
    fitToView: false,
    width: 305,
    minHeight: 63,
    height: 63,
    autoSize: false,
    closeClick: false,
    openEffect: 'elastic',
    closeEffect: 'elastic'
});