Follow these steps to create a login form in a lightbox:
We'll get started by setting up an HTML page and associated files and folders like we did in Chapter 1, Designer, Meet jQuery. Our HTML page will contain a header that displays a login form. It's common for sites to enable people to login from any page on the site:
<div id="example-header"> <h1>Ireland: The Emerald Isle</h1> <form action="#" id="login-form"> <div><label for="username">Username:</label> <input type="text" id="username"/></div> <div><label for="password">Password:</label> <input type="text" id="password"/></div> <div><input type="submit" value="Log In"/></div> </form> </div>
Next, we'll open
styles.css
and add some CSS, so that the header displays with the title on the left and the form on the right:...