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
Looks like you might of. Could you link me to your site please?
(2012-05-17, 01:03 PM)euantor Wrote: [ -> ]Looks like you might of. Could you link me to your site please?
My site is http://www.razrgaming.2tealth.com
Ah, I see the issue. You need to move the following:

<div id="mask"></div>

To the top of the header template instead. Your theme is using position: relative on the panel so the original code won't work quite right.
(2012-05-17, 02:42 PM)euantor Wrote: [ -> ]Ah, I see the issue. You need to move the following:

<div id="mask"></div>

To the top of the header template instead. Your theme is using position: relative on the panel so the original code won't work quite right.
It already is at the top.

Here is my header_welcomeblock_guest
<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="username">Username:</label>
                    </td>
                    <td>
                        <input type="text" value="" style="width: 200px;" maxlength="30" size="25" name="username" class="textbox" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <label for="password">Password:</label>
                    </td>
                    <td>
                        <input type="password" value="" style="width: 200px;" size="25" name="password" class="textbox" />
                    </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>

<a rel="closeModal" href="#">Close</a>
Move it into the header template instead and put it at the top.
Ok I put it in the header template, but at the very top i get this.
http://gyazo.com/5f9fa4aedb66547f9469731...1337307554
You were only meant to move the line that read <div id="mask"></div>
<label for="password">Password:</label>
<input type="password" value="" style="width: 200px;" size="25" name="password" class="textbox" />
and
<label for="username">Username:</label>
<input type="text" value="" style="width: 200px;" maxlength="30" size="25" name="username" class="textbox" />

are causing a W3C Validation Warning.

Quote:reference to non-existent ID "password"
and
Quote:reference to non-existent ID "username"


I tried adding a id=password // id=username to the input tags, but this broke my registration page.

Any advice?
Check if this fixes, not sure, but shooting a blind arrow (wild guess), see if it does a trick;

Use below instead:

<label for="password">Password:</label>
<input type="password" value="" style="width: 200px;" size="25" name="password" id="password" class="textbox" />

<label for="username">Username:</label>
<input type="text" value="" style="width: 200px;" maxlength="30" size="25" name="username" id="username" class="textbox" />
Well, as I said, I already tried adding a 'id' attribute, but that broke the registration page for some reason. Sad
Thanks for your help though!
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