MyBB Community Forums

Full Version: Adding a modal login box to MyBB using jQuery
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
http://gyazo.com/3e8a6d0ec741c3b06aa35917df83a781

I just added it and their's no [X] or close button.. and I read that you added it already but it doesn't show. how do I fix it? and how can I add a register button beside the be login button. and how to make the background of the modal box be the background of my forums?
I've already answered about the close button elsewhere in this thread. As for the register button, just modify the template and add a link to the registration page. Regarding the background, just change the CSS.
(2012-08-06, 07:53 PM)euantor Wrote: [ -> ]Creating one for the register is rather more difficult unless you disable the captcha image and anything else extra (eg: registration security questions).

tanks i understand this but
i want how do right code
exu my english is bad
tanx
Well, have you disabled the captcha and everything? If so, I'll have a look at writing the exact code tonight.
The mask wasn't working for me initially... it just pushed my content down and then left a small area for clicking out rather than the entire body. To fix it I did this... (just incase anyone else has that issue).

<div id="loginbox">
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> 
<div id="mask"></div>
</div>

And this for CSS:

#loginbox {
	width: 100%;
        height: 100%;
}
For the next update could you add a lost password in the box and a register? It would look nice for the next update. Smile
Should be easy to do the lost password link but by the register, do you mean a register modal? If so, there are certain issues relating to the captcha with that.
jquery 1.8 is out. You could update the op. Smile

Updated: running it with 1.8, works fine.
Thank you so much Euantor. You made the login system for my forum look so much smoother.

One question though: In showthread, if someone needs to log in to reply, it shows error_no_permission with that old crummy login box. Is there a way to call the modal box instead?

Thanks!
@king_og from the little reading regarding I've done so far about 1.8 there are no changes that should affect this though I'll update the link in the IP when it's available on CDNs and i get back from holiday

@Josh weird, it should work just fine. I'll try take a look but as I said above I'm currently on holiday and can only access the net via my phone
Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26