1.6 Compatible: Modal login box for MyBB using jQuery
#1
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:

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

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

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

PHP Code:
<div id="mask"></div>
Welcome guestPlease <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:
PHP Code:
#mask {
    
positionabsolute;
    
z-index9010;
    
background-color#000000;
    
displaynone;
    
top0;
    
left0;
}

.
modalBox {
    
positionfixed;
    
width440px;
    
displaynone;
    
z-index9015;
    
background#ffffff;
    
border1px solid #000000;
    
-webkit-box-shadow0px 7px 10px 0px rgba(0,0,0,0.81);
    -
moz-box-shadow0px 7px 10px 0px rgba(0,0,0,0.81);
    
box-shadow0px 7px 10px 0px rgba(0,0,0,0.81);
}
    .
modalBox .thead {
        
font-weightbold;
    }
    .
modalBox .modalContent {
        
padding5px 10px;
    } 
Reply
#2
It would probably be helpful if you provided a screenshot of what this looks like afterwards. Nice thread though.
Reply
#3
Good idea. I'll add one later.
Reply
#4
Cough cough. It's later.
Reply
#5
Yeah, I'll get to it eventually Wink
Reply
#6
I'd fix this up Euan...but CloudFlare is preventing me...

for christ sakes remove it
Reply
#7
Thanks
Reply
#8
This still functional?
Reply
#9
(16-02-2018, 07:52 PM)BHanks Wrote: This still functional?

The login box in 1.8 is a modal by default.
BHanks likes this post
Reply
#10
(18-02-2018, 04:53 PM)euan Wrote:
(16-02-2018, 07:52 PM)BHanks Wrote: This still functional?

The login box in 1.8 is a modal by default.

Thanks Euan
Reply