Page 1 of 1

Popup login box

Posted: Tue Sep 21, 2010 7:23 pm
by therat
I am trying to get a popup login box working using jquery. I can get the popup to display but have 2 problems.

1. I have a small cross in the popup to close it which doesn't work.
2. The actual login form doesn't work, I get an error saying you cannot login without a password.

This is what I have so far. Any help appreciated as my javascript is non existent.

Jquery to open and close popup

Code: Select all

<script type="text/javascript">
  $(document).ready(function() {
    $("#login-box_popup").dialog({ autoOpen: false });
  });
  
  $('#login-box_popup')
    .click(function() {
        $("#login-box_popup").dialog('open');
    });

  $('#login-box_close')
    .click(function() {
        $("#login-box_close").dialog('close');
    });
</script>
HTML for the actual popup

Code: Select all

<div id="login-box_popup" class="popupWrapper" style="z-index: 16000; top: 72.5px; left: 427.5px; position: fixed; display: none;">
    <div id="login-box_inner" class="popupInner" style="width: 400px; max-height: 500px;">
        <form action="{S_LOGIN_ACTION}" method="post" id="login">
            <div id="regular_signin">
                <h3 class="bar">ENTER YOUR USERNAME AND PASSWORD</h3>
                <ul>
                    <li class="field">
                        <label for="username">{L_USERNAME}:</label>
                        <input type="text" tabindex="1" name="{USERNAME_CREDENTIAL}" id="username" size="25" value="{USERNAME}" class="inputbox autowidth" />
                    </li>
                    <li class="field">
                        <label for="password">{L_PASSWORD}:</label>
                        <input type="password" tabindex="2" id="password" name="{PASSWORD_CREDENTIAL}" size="25" class="inputbox autowidth" /><br />
                        <!-- IF U_SEND_PASSWORD --><a href="{U_SEND_PASSWORD}">{L_FORGOT_PASS}</a><!-- ENDIF -->
                    </li>
                </ul>
                <fieldset id="signin_options">
                    <ul>
                        <!-- IF S_AUTOLOGIN_ENABLED --><li><label for="autologin"><input type="checkbox" name="autologin" id="autologin" tabindex="4" /> {L_LOG_ME_IN}</label></li><!-- ENDIF -->
                        <li><label for="viewonline"><input type="checkbox" name="viewonline" id="viewonline" tabindex="5" /> {L_HIDE_ME}</label></li>
                    </ul>
                </fieldset>
                <fieldset class="submit">
                    {S_HIDDEN_FIELDS}<input type="submit" name="login" tabindex="6" value="{L_LOGIN}" class="input_submit" />
                    {S_LOGIN_REDIRECT}
                </fieldset>
            </div>
        </form>
    </div>
    <div id="login-box_close" class="popupClose clickable">
        <img alt="x" src="{T_THEME_PATH}/images/close_popup.png" />
    </div>
</div>

Re: Popup login box

Posted: Wed Sep 22, 2010 4:43 am
by Meis2M
very good idea.

Re: Popup login box

Posted: Wed Sep 22, 2010 5:22 pm
by therat
Meis2M wrote:very good idea.
Only if I can get it working. Any ideas?

Re: Popup login box

Posted: Sat Oct 02, 2010 4:34 pm
by therat
Anyone got any ideas, still trying to get this to work properly.

Re: Popup login box

Posted: Sun Oct 03, 2010 10:15 am
by Truemedia
I had a simillar post to this but it kinda got ignored (in interest not developement). You could send the user information through ajax to a custom php script and call the phpbb login function to use the ajax variables as the parameters.

I'm not sure how secure that would be, but having that triggered from the submit button you could then either hide the box if user is logged in and display normal logged in links or just show wrong username or password above the login box.

I could probably help but Im too occupied with other projects atm.

Re: Popup login box

Posted: Sun Oct 03, 2010 6:06 pm
by therat
Thanks for the info, I may end up doing something like that to get it working.