Bạn ghé thăm diễn đàn lần đầu? hãy đăng ký ngay bây giờ để tham gia.
  • Đăng nhập:

Chào mừng bạn đến với ITVNN FORUM - Diễn đàn công nghệ thông tin.

Nếu đây là lần đầu tiên bạn tham gia diễn đàn, xin mời bạn xem phần Hỏi/Ðáp để biết cách dùng diễn đàn. Để có thể tham gia thảo luận bạn phải đăng ký làm thành viên, click vào đây để đăng ký.


  • Partner Area
kết quả từ 1 tới 1 trên 1

Ðề tài: Modal Login Box

Tăng kích thước phông chữ Giảm kích thước phông chữ
  1. #1
    admin's Avatar

    Trạng thái
    Offline
    Họ tên
    Mai Thanh Trung
    Tham gia ngày
    Aug 2006
    Thành viên thứ
    1
    Đến từ
    Pleiku, Gia Lai
    Tuổi
    34
    Giới tính
    Bài gởi
    4,884
    Level: 55 [?]
    Experience: 23,156,267
    Next Level: 26,073,450
    Cảm ơn 53
    Cảm ơn 2,444 lần / 1,405 Bài viết

    Default Modal Login Box  

    1. Go to Admin > Styles and Templates > Style Manager > YOUR THEME (Edit Templates) > headinclude > add the following code:

    Code: 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    
    jQuery.noConflict();
    
    jQuery(document).ready(function($)
    {
        // Make the jQuery modal login redirect you back to the page you're currently on //
        $('#loginModal input[name="url"]').attr("value", window.location);
        // /Login redirect //
    
        // Modal Boxes //
        $('a[name="modal"]').on('click', function(event)
        {
            event.preventDefault();
            
            var target = $(this).attr('rel');
            
            // Set up the shadowing
            var maskHeight = $(document).height();
            var maskWidth = $(window).width();
            $('#mask').css({'width': maskWidth, 'height': maskHeight});
            $('#mask').fadeIn(1000);    
            $('#mask').fadeTo("slow", 0.8);  
            
            // Position the actual modal
            var winH = $(window).height();
            var winW = $(window).width();
            $(target).css('top',  (winH / 2) - ($(target).height() / 2));
            $(target).css('left', (winW / 2) - ($(target).width() / 2));
            $(target).fadeIn(2000); 
        });
        
        $('.modalBox a[rel="closeModal"]').on('click', function(event)
        {
            event.preventDefault();
            $('#mask, .modalBox').hide();
        }); 
        
        $('#mask').on('click', function ()
        {
            $(this).hide();
            $('.modalBox').hide();
        }); 
        // /Modal Boxes //
    });
    </script>
    AFTER:

    Code: 
    <meta name="description" content="{vb:raw vboptions.description}" />
    </vb:if>
    2. Go to Admin > Styles and Templates > Style Manager > YOUR THEME (Edit Templates) > header > add the following code:

    Code: 
    <vb:if condition="$show['guest']">
    <div id="mask"></div>
    Welcome guest! Please <a href="action="login.php?{vb:raw session.sessionurl}" name="modal" rel="#loginModal">Login</a>
    <div id="loginModal" class="modalBox loginModalBox">
        <div class="blockhead">
            Login to {vb:raw vboptions.bburl}
    <a rel="closeModal" href="#">Close</a>
        </div>
        <div class="modalContent loginModalContent">
            <form id="navbar_loginform" action="login.php?{vb:raw session.sessionurl}do=login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, {vb:raw show.nopasswordempty})">
                <table border="0" width="100%">
                    <tr>
                        <td>
                            <label for="login_username">Username:</label>
                        </td>
                        <td>
                            <input type="text" value="<vb:if condition="$username">{vb:raw username}<vb:else />{vb:rawphrase username}</vb:if>" style="width: 200px;" maxlength="30" size="25" name="vb_login_username" class="textbox" id="login_username" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="login_password">Password:</label>
                        </td>
                        <td>
                            <input type="password" value="{vb:rawphrase password}" style="width: 200px;" size="25" name="vb_login_password" class="textbox" id="navbar_password" />
                            <input type="text" class="textbox default-value" tabindex="102" name="vb_login_password_hint" id="navbar_password_hint" size="25" value="{vb:rawphrase password}" style="display:none;" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="cb_cookieuser_navbar" title="If ticked, your login details will be remembered on this computer, otherwise, you will be logged out as soon as you close your browser."><input type="checkbox" name="cookieuser" value="1" id="cb_cookieuser_navbar" class="cb_cookieuser_navbar" accesskey="c" tabindex="103" /> Save</label>
                        </td>
                        <td style="padding-bottom: 5px;">
                            <input type="submit" class="loginbutton" tabindex="104" value="{vb:rawphrase log_in}" title="{vb:rawphrase enter_username_to_login_or_register}" accesskey="s" />
                        </td>
                    </tr>
                </table>
                    <input type="hidden" name="s" value="{vb:raw session.sessionhash}" />
                    <input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
                    <input type="hidden" name="do" value="login" />
                    <input type="hidden" name="vb_login_md5password" />
                    <input type="hidden" name="vb_login_md5password_utf" />
            </form>
        </div>
    </div> 
    </vb:if>
    You can add this anywhere in the header template.

    3. Go to Admin > Styles and Templates > Style Manager > YOUR THEME (Edit Templates) > CSS Templates > additional.css > add the following code:

    Code: 
    #mask {
        position: absolute;
        z-index: 9010;
        background-color: #000000;
        display: none;
        top: 0;
        left: 0;
    }
    
    .modalBox {
        position: fixed;
        width: 400px;
        display: none;
        z-index: 9015;
        background: #000;
        border: 1px solid #fff;
        -webkit-box-shadow: 0px 7px 10px 0px rgba(0,0,0,0.81);
        -moz-box-shadow: 0px 7px 10px 0px rgba(0,0,0,0.81);
        box-shadow: 0px 7px 10px 0px rgba(0,0,0,0.81);
    }
        .modalBox .modalContent {
            padding: 5px 10px;
        } 
    
    .modalBox .blockhead {
        text-align: left;
    }
    This is a minimal example of a modal login box. You will have to style the box to match your theme(s).

    Screenshots:


    .♥.Thà không yêu cho cuộc đời trong trắng.♥.
    .♥.Lỡ yêu rồi phải cố gắng thành công.♥.


    Cung cấp Domain, Hosting, Reseller, VPS và Thiết kế website

  2. The Following User Says Thank You to admin For This Useful Post:

    thich8nhat (31-05-2014)


 

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. lỗi login
    By Cơn Gió in forum Thắc mắc - Góp ý
    Trả lời: 0
    Bài mới gởi: 04-03-2012, 10:46 PM
  2. K login vào diễn đàn được
    By vokhuongduy in forum Thắc mắc - Góp ý
    Trả lời: 2
    Bài mới gởi: 10-04-2011, 08:58 PM
  3. giúp đỡ gấp ko login được :((
    By laonap in forum Hỏi đáp & Thảo luận
    Trả lời: 2
    Bài mới gởi: 27-11-2010, 06:52 PM
  4. làm thế nào để có màn hình login như thế này
    By taitiengiang in forum Hỏi đáp & Thảo luận
    Trả lời: 2
    Bài mới gởi: 28-09-2010, 07:16 PM
  5. Login Page Template - HTML Template + PSD (Template Trang Login cực độc cực đẹp)
    By bavuongduongpho in forum Templates , Icons , Graphic Stuffs
    Trả lời: 0
    Bài mới gởi: 17-08-2010, 09:04 PM

Tags for this Thread

Bookmarks

Quuyền Hạn Của Bạn

  • Bạn không thể tạo chủ đề mới
  • Bạn không thể trả lời bài viết
  • Bạn không thể gửi file đính kèm
  • Bạn không thể chỉnh sửa bài viết
  •