Modal Registration Box using ExpressionEnine and jQuery

Question

I'd like to create a modal style registration/login box for my ExpressionEngine site. What's the best way to handle registration on a modal box? Should I call a registration page using an iframe. Are there security concerns?

Answer 1

You can try cloning the following html that you have on your main login page into the modal box:

<form method="post" action="/">

            <div style="margin-top:-4px;">
                <a href="javascript:void(0);" onclick="$('#loginFormMiniMain').fadeOut('fast');">X</a>
                <input type="hidden" name="RET" value="-1">
            </div>

            <table cellpadding="0" cellspacing="6" border="0" align="center">
            <tbody><tr>
            <td align="right">Username</td>
            <td><input type="text" class="input" id="username" name="username" size="15" value="">
            <input type="hidden" name="auto_login" value="1"></td>
            </tr>

            <tr>
            <td align="right">Password</td>
            <td><input type="password" class="input" name="password" size="15"></td>
            </tr>

            <tr>
                <td colspan="2" align="right">
                    <a href="http://expressionengine.com/forums/member/forgot_password/"&gt;Forgot your password?</a>&nbsp;
                    <input type="submit" class="submit" value="Login">
                </td>
            </tr>
            </tbody></table>
        </form>

Answer 2

I use fancybox. Call it as an iframe and just make sure you post it to the appropriate template/page, which you will set in the return="" parameter, and if it is set as an iframe, it will post to that page still within the modal window (fancybox).