Mini Mods - Modal Login Box

I thought I'd share my tutorial on how to make the login button in your header, a modal login box. Are you sick of being directed to the login page? Don't like seeing the form in your header?

With this tutorial, you can remove all that and replace it with just one word 'Login'. Once clicked, a little box will appear on your screen, which allows you to login. The page will then refresh, and you will be logged.

1. Go to Admin > Styles and Templates > Style Manager > YOUR THEME (Edit Templates) > headinclude > add the following 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:

<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:

<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:

#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).

PLEASE NOTE
Remove any other login form or login button from your header template before or after installing this. I have only tested this on localhost.

[JGreig]

Reserved!