In the previous section, we have learned about creating the signup form inside a modal window. In this section, we will learn about creating a login screen inside the modal window. The methodology and principle are exactly the same as how we created the signup page.

Take a look at the following login wireframe, which we are going to implement in just a bit:

Time for some action. We are going to create a modal window first and we can bind a click event to open the dialog window:

<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" 
    aria-labelledby="myModalLabel" aria-hidden="true" style="display: 
     none;">
    <div class="modal-dialog">
        <div class="loginmodal-container">
        <h1>Login to Your Account</h1><br>
            <form>
                 <input type="text" name="user" placeholder="Username">
                 <input type="password" name="pass" placeholder="Password">
                 <input type="submit" name="login" class="login 
                   loginmodal-submit" value="Login">

             </form>
 
            <div class="login-help">
                <a href="#">Register</a> - <a href="#">Forgot Password</a>
            </div>
        </div>
    </div>
</div>

In the preceding code, we have implemented a modal window with yet another form, this time for a login feature with a number of form elements—a username and password with a submit button. Launch the page in the browser and we should see the following output:

Our application is almost taking shape now. I am sure you are as excited as I am. Let's go ahead and implement the listings page.