1.8 brings a lot of fun new stuff to try out. In this tutorial I'll show you how to quickly make a modal login without including any CSS, and only using minimal Javascript. Also we'll only be making 1 template edit.
First off, huge credit to Euan T., the login form portion of this is built from his tutorial found here: http://community.mybb.com/thread-117646.html
Paste the following into your header_welcomeblock_guest template:
And as simple as that you have a fully functional modal login.
![.png]()
modal.png (Size: 19.18 KB / Downloads: 69)
The modals can be used for anything you'd like, just change both occurrences of login-form.
First off, huge credit to Euan T., the login form portion of this is built from his tutorial found here: http://community.mybb.com/thread-117646.html
Paste the following into your header_welcomeblock_guest template:
Code:
<a href="{$mybb->settings['bburl']}/member.php?action=login" class="open-modal" data-selector="#login-form" rel="modal:open">{$lang->welcome_login}</a> or <a href="{$mybb->settings['bburl']}/member.php?action=register">{$lang->welcome_register}</a>
<div id="login-form" style="display: none;">
<form method="post" action="member.php">
<table class="tborder" cellspacing="0">
<tr>
<td class="thead" colspan="2">
<strong>Login at {$mybb->settings['bbname']}</strong>
</td>
</tr>
<tr>
<td class="trow1">
<label for="login_username">
Username:
</label>
</td>
<td class="trow1">
<input type="text" value="" style="width: 200px;" maxlength="30" size="25" name="username" class="textbox" id="login_username" />
</td>
</tr>
<tr>
<td class="trow2">
<label for="login_password">
Password:
</label>
</td>
<td class="trow2">
<input type="password" value="" style="width: 200px;" size="25" name="password" class="textbox" id="login_password" />
</td>
</tr>
<tr>
<td class="tfoot" colspan="2">
<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>
<input type="submit" value="Login" name="submit" class="button" style="float: right;" />
</td>
</tr>
</table>
<input type="hidden" value="do_login" name="action" />
<input type="hidden" value="" name="url" />
</form>
</div>
<script type="text/javascript">
$('a.open-modal').click(function(event) {
var modalSelector = $(this).attr('data-selector');
event.preventDefault();
$(modalSelector).modal({
fadeDuration: 250,
keepelement: true
});
return false;
});
</script>And as simple as that you have a fully functional modal login.
modal.png (Size: 19.18 KB / Downloads: 69)
The modals can be used for anything you'd like, just change both occurrences of login-form.