how to popup a form on page load?

Question

I want that a login form pops up, on a certain page.

<a id="test" href="#login_form">Click me</a>

    <div style="display:none">
            <form id="login_form" method="post" action="parse_login.php">
                <p id="login_error">Please login</p>

            <table>
         <tr><td><input type='text' name='username' placeholder="username" style="width: 250px;" /><p /></tr></td>
                                <tr><td><input type='password' name='password' placeholder="password" style="width: 250px;" /><p /></tr></td>
                            </table>
                            <div class="logginbutton"><button type='submit' name='submit' class="button-small">Login</button>
                        </form>
                    </div>

and JS is as follows:

$("#test").fancybox({
    'scrolling'     : 'no',
    'titleShow'     : false,
    'onClosed'      : function() {
        $("#login_error").hide();
    }
});


$("#login_form").bind("submit", function() {

    if ($("#username").val().length < 1 || $("#password").val().length < 1) {
        $("#login_error").show();
        $.fancybox.resize();
        return false;
    }

    $.fancybox.showActivity();


    return false;
});

What i want is that, form should popup on page page load instead of onclick, and it should stay there till visitor logs in, so need to get rid of close sign.

Take a look on fiddle

Answer 1

Try

jQuery(document).ready(function ($) {
    $.fancybox({
        href: "#login_form",
        modal: true,
        scrolling : 'no',
        titleShow: false,
        onClosed : function() {
            $("#login_error").hide();
        }
    });
});

It will launch fancybox on page load.

NOTE : modal: true will prevent to close fancybox and the close button won't be displayed ( escape or clicks outside the box won't close it either) The form will close if you place a close button inside the box (bound to a $.fancyblox.close() method) or if the form passes the validation and it's submitted.

In that case, you should remove return false from this script

$("#login_form").bind("submit", function() {  
    if ($("#username").val().length < 1 || $("#password").val().length < 1) {
        $("#login_error").show();
        $.fancybox.resize();
        return false; // prevents the form of being submitted if validation fails
    }    

    // $.fancybox.showActivity(); // you don't need this unless you are going to display the results in fancybox

    // return false; // <== this will prevent the form of being submitted, regardless it passes the validation
});

Notice that this is for fancybox v1.3.4 (because the API options you used in your post, I assume you are using that version)

EDIT : OK, I did it for you, see JSFIDDLE

I even corrected your little html mistakes like

<a id="test" href="#login_form">Click me</div>