Creating a lightbox login/registration form

Hey guys, I was trying to make my login form appear  as a light box when the login/register button is clicked. I tried but I couldn't make it. Anybody want to help?

  • Tell us a little more. What you have tried, what index page do you use?

  • Untested code -

    Create a lightbox (google for it and you will get tons of instructions) and then put this code where the content the lightbox to be displayed needs to be placed.

        require_once(dirname(dirname(__FILE__)) . "/engine/start.php");
        if (!isloggedin()) {
            $body = elgg_view("account/forms/loginpage", array('friend_guid' => $friend_guid, 'invitecode' => $invitecode));

            page_draw(elgg_echo('login'), elgg_view_layout("one_column", $body));
        } else {

    Again, I haven't tested.

  • @gillie

    My index page is elgg's custom index with a little css modification. I was able to create a light box with text when the "login" link I created was clicked but I couldn't insert the login form in there.


    When I insert the code you gave me, it displayed an empty lightbox. Here's the lightbox code I got:


                display: none;
                position: absolute;
                top: 0%;
                left: 0%;
                width: 100%;
                height: 100%;
                background-color: black;
                -moz-opacity: 0.8;
                filter: alpha(opacity=80);
            .white_content {
                display: none;
                position: absolute;
                top: 25%;
                left: 25%;
                width: 50%;
                height: 50%;
                padding: 16px;
                border: 16px solid orange;
                background-color: white;
                overflow: auto;


    <p>Click <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a></p>
            <div id="light" class="white_content">This is the lightbox content. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
            <div id="fade" class="black_overlay"></div>

  • If you get text you must be very close. Try to insert only <?php echo elgg_view("account/forms/login"); ?>

  • I would to see this done for the custom registration plugin which moves login and reg to it's own page. Would be great if it could create a combo lightbox! Anyone like to try with the custom reg plugin to ge everything on one lightbox?

    here is what it looks like now!

  • @gillie

    You are the man! It worked out, thanks

  • Here is a poor mans way to do it.

    The jquery is already installed in elgg, no need to do anything there.


    <a href="" rel="facebox">Log In</a>

    login.php is an external page.

    here is the entire code for login.php



    <div align="center">
    <?php require_once("../engine/start.php");?>
    <?php  echo elgg_view("account/forms/login");?>


    You might have to play with the path to engine.


  • This could be a potential to solution to a problem I have just now.  Can I assume that the code you (Steve) posted will cause the login.php file to render inside an overlay popup, in the same way that lightbox media opens on the majority of web 2.0 sites these days?

    My own issue is to only allow registration/login via existing online accounts so if this code does what I think I could simple replace the login code with that of the social buttons... :-/

  • @LJager Yes with limitations, size of the box is made for elgg tabs, it is a little wide. 

  • Update to poorman's lightbox

    To correct the width from being 730px wide, change the css here


    old code

    #facebox .body {

         padding: 10px;

         background: white;

         width: 730px;

         -webkit-border-radius: 12px;

         -moz-border-radius: 12px;


    New code

    #facebox .body {

         padding: 10px;

         background: white;

         -webkit-border-radius: 12px;

         -moz-border-radius: 12px;


    If you have a theme you might have to fix the css there as well