Adding a modal login box to MyBB using jQuery

[Euan T]

I’ve seen a few people wondering how to achieve this kind of thing so I thought I’d write a quick tutorial on how I personally create a modal style login box for use with MyBB. This guide does require jQuery as it’s my preferred JavaScript library and I’d rather not learn Prototype when we’re moving to JQuery in 1.8 anyway.

The first thing to do is to include jQuery in your theme. Some themes might already have it included. It’s easy enough to find out. Simply go to the template manager for your theme and modify the headerinclude template (ACP > Templates & Style > Templates > Your template Set > Ungrouped Templates > headerinclude). Have a look in this template and see if you notice any mention of jQuery. If not, add the following to the very bottom of the template:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

This loads the (currently) latest version of jQuery from Google’s CDN. After this script, add the following code – it will operate the actual opening and closing of the modal box:

<script type="text/javascript">
/**
 * Modal Boxes JS
 *
 * @author Euan T. <[email protected]>
 * @version 1.0.0
 */

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>

Now that we have our JavaScript in place, it’s time to add the actual code for the modal login box. To do this, we need to alter the header_welcomeblock_guest template (ACP > Templates & Style > Templates > Your template Set > Header Templates > header_welcomeblock_guest).

At this point, it very much depends on the theme you’re using as to what you’ll need. Here’s a bare minimal example of what the template should look like though:

<div id="mask"></div>
Welcome guest! Please <a href="{$mybb->settings['bburl']}/member.php?action=login" name="modal" rel="#loginModal">{$lang->welcome_login}</a> or <a href="{$mybb->settings['bburl']}/member.php?action=register">{$lang->welcome_register}</a>
<div id="loginModal" class="modalBox loginModalBox">
	<div class="thead">
		Login at {$mybb->settings['bbname']}
	</div>
	<div class="modalContent loginModalContent">
		<form method="post" action="member.php">
			<table border="0" width="100%">
				<tr>
					<td>
						<label for="login_username">Username:</label>
					</td>
					<td>
						<input type="text" value="" style="width: 200px;" maxlength="30" size="25" name="username" class="textbox" id="login_username" />
					</td>
				</tr>
				<tr>
					<td>
						<label for="login_password">Password:</label>
					</td>
					<td>
						<input type="password" value="" style="width: 200px;" size="25" name="password" class="textbox" id="login_password" />
					</td>
				</tr>
				<tr>
					<td>
						<label class="smalltext" 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" value="yes" checked="checked" name="remember" class="checkbox"> Remember?</label>
					</td>
					<td>
						<input type="submit" value="Login" name="submit" class="button" />
					</td>
				</tr>
			</table>
			<input type="hidden" value="do_login" name="action" />
			<input type="hidden" value="" name="url" />
		</form>
	</div>
</div>

As I said, that’s the bare minimal you’ll need in order for this to work at all. Finally, you’ll need to add the following to your theme’s global.css file:

#mask {
	position: absolute;
	z-index: 9010;
	background-color: #000000;
	display: none;
	top: 0;
	left: 0;
}

.modalBox {
	position: fixed;
	width: 440px;
	display: none;
	z-index: 9015;
	background: #ffffff;
	border: 1px solid #000000;
	-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 .thead {
		font-weight: bold;
	}
	.modalBox .modalContent {
		padding: 5px 10px;
	}

Here's a screenshot of this type of effect in action for anybody who may wish to preview it too:

   



If you have any problems following this or getting it to work, feel free to post below and I'll see what I can do to help.

[Turbo]

Not getting a pop-up, just redirects to login page.

[Euan T]

You obviously did something wrong then. Could you post a link to your site?

[Turbo]

Re-checked, MyBB added some random characters when saving.

[Euan T]

Ah yes, it does that if you're using codepress (which I always advise disabling). To disable it go to the ACP > Preferences > Turn on / off Codepress = Off.

[Alex C.]

Awesome tutorial, it worked, but I have one question:

Where do I add padding and what not to make the title in the right place (see picture)?



Edit: Never mind, I got it, great tutorial.

[Euan T]

Awesome tutorial, it worked, but I have one question:

Where do I add padding and what not to make the title in the right place (see picture)?



Edit: Never mind, I got it, great tutorial.

Depends on the theme, but you can alter it in the CSS class ".modalBox .thead".

[yulasinio]

Thanks Euantor, i was using another version of this but yours looks so much clean. +Rep

[Matt Fargo]

I LOVE YOU, it worked, but .. i added border radius to a new thead div class but it still is like.. not rounded edges, hmm.. a little X is corner would be tight.

[Euan T]

You can add the close button like so:

<a rel="closeModal" href="#">Close</a>

I'd already added it into the JS just in case somebody wanted it