Modal Login Box

[admin]

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

Screenshots:

http://s18.postimg.org/u22nztop1/vbmodal.jpg (http://postimg.org/image/u22nztop1/)