modal Registration box

[illusionalp]

Credits :
euantor - For the Idea/Making a tutorial similar to this before what is different ? this tutorial show you how to make Registration box euantor shows you how to make Login box ,euantor tutorial link http://community.mybb.com/thread-117646.html
Vernier - for telling me how to disable the captcha ^^
lets begin First of all go to Admin Control Panel > Templates and Style > Templates > Your Theme > Templates > Ungrouped Templates > headerinclude and Add

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

to the bottom of the template
Second of all go to Admin Control Panel > Templates and Style > Templates > Your Theme > Templates > Header Templates > header_welcomeblock_guest and Add

<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 Add this under it

 <div id="mask"></div>
Welcome guest! Please <a href="{$mybb->settings['bburl']}/member.php?action=login"> Login</a> or <a href="{$mybb->settings['bburl']}/member.php?action=register" name="modal" rel="#registerModal">{$lang->welcome_register}</a>

<div id="registerModal" class="modalBox regitserModalBox">
    <div class="thead">
        Register at {$mybb->settings['bbname']}
    </div>
<div class="modalContent registerModalContent">
<form action="member.php" method="post" id="registration_form">
Username :<td><input type="text" class="textbox" name="username" id="username" style="width: 100%" value="{$username}" /></td>
Password :<td><input type="password" class="textbox" name="password" id="password" style="width: 100%" /></td>
Confirm Password:<td><input type="password" class="textbox" name="password2" id="password2" style="width: 100%" /></td>
<td colspan="2" style="display: none;" id="password_status">&nbsp;</td>
Email :<td><input type="text" class="textbox" name="email" id="email" style="width: 100%" maxlength="50" value="{$email}" /></td>
Confirm Email :<td><input type="text" class="textbox" name="email2" id="email2" style="width: 100%" maxlength="50" value="{$email2}" /></td>
<input type="hidden" name="step" value="registration" />
<input type="hidden" name="action" value="do_register" />
<br>
<input type="submit" class="classname" name="regsubmit" value="Register" />
</div>
</div>
 

now you must go to Admin Control Panel > Templates and Style > Themes > Edit your theme > Edit the Global.css > Add this code at the end

#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;
    } 

the button will look kinda basic on some themes or you might not like the color you can get your own custom plugin done visti this website for more information http://www.cssbuttongenerator.com/ when you get the css code paste it at the end of the global.css and the add

class="classname"

to the button line in the main code which is

<input type="submit" name="regsubmit" value="Register" /> 

after adding the class="classname it should look like this

<input type="submit" name="regsubmit" value="Register" class="classname" /> 

in order to get done you need to disable the captcha here is how to do it
AdminCP -> Configuration -> General Configuration -> CAPTCHA Images for Registration & Posting -> No CAPTCHA
   
it kinda suck in this photo but if you had a nice theme it should look better than this
   
Hope you like it
regards,