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:

http://s18.postimg.org/u22nztop1/vbmodal.jpg