Opening a bootstrap modal dialog on by loading a view in codeigniter

Question

Scenario: User clicks the Login with Facebook link, but actually user is not registered in the database. Code for the url is:

<a href="<?php echo $this->authlib->fbloginURL(site_url() . 'auth/facebooklogin'); ?>">

In the auth/facebooklogin() function, I am checking for this condition, and if the user is not registered, I want to open a modal for registration.

Code Snippet in facebooklogin() that checks and redirects:

if(is_null( $this->authlib->has_account( $fb_id ) ) ) // User has no account
    redirect('/auth/register_modal');

And the register_modal() function simply loads the new view that I want to display:

function register_modal()
{
    $this->load->view('include/header');
    $this->load->view('auth/register_modal');
    $this->load->view('include/footer');
}

Now for the purpose of discussion my modal dialog is:

    <div class="modal hide" id="myModal">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">x</button>
            <h3>Login to MyWebsite.com</h3>
        </div>
        <div class="modal-body">
             <form method="post" action='' name="login_form">
                 <p><input type="text" class="span3" name="eid" id="email" placeholder="Email"></p>
                <p><input type="password" class="span3" name="passwd" placeholder="Password"></p>
                <p><button type="submit" class="btn btn-primary">Sign in</button>
                <a href="#">Forgot Password?</a>
                </p>
             </form>
        </div>
        <div class="modal-footer">
            New To MyWebsite.com?
        <a href="#" class="btn btn-primary">Register</a>
        </div>
</div>

This does not work.. I was wondering what am I doing wrong? All relevant bootstrap files are loaded in the header.

Answer 1

Found the solution myself. I just had to change the following in my modal:

<div class="modal hide" id="myModal">

to

<div class="modal show" id="myModal">

i.e. change the hide to show. Silly me :)

Answer 2

Login

 </diV>
 <div class="modal-body">


 </div>
 <div class="modal-footer" id="modal-footer" >


 </div>