The key feature of the login overlay is that when the user opts to log into the site the login user interface is displayed in the same page the user is visiting, overlaying the existing page content. Therefore, our first order of business is to discuss how to define a login user interface within our web pages that is initially hidden, but is laid over the displayed page content when the user clicks the "Log In" link in the upper right corner.

Let's start by looking at the markup for the login user interface. Listing 1 shows the markup used to generate the login user interface displayed in Figure 1. This markup goes in your master page so that it is present on every web page on your site.

Listing 1 - The HTML for the login user interface.

<div id="loginUI">
    <div id="titlebar">
        <div id="closeIcon">X</div>
        Login!
    </div>
    <div id="body">
        <table>
            <tr>
                <td>Username:</td>
                <td><input type="text" id="loginUsername" /></td>
            </tr>
            <tr>
                <td>Password:</td>
                <td><input type="password" id="loginPassword" /></td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>
                    <input type="checkbox" id="loginRememberMe" />
                    <label for="loginRememberMe">Remember me</label>
                </td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>
                    <input type="button" id="loginLogin" value="Log In" />
                </td>
            </tr>
        </table>
 
        <div id="invalidCredentials">
            Your username and/or password are invalid.
        </div>
 
        <p>
            Don't have an account?
            <asp:HyperLink ID="lnkRegister" runat="server" 
    NavigateUrl="~/Account/Register.aspx">Create one now!</asp:HyperLink>
        </p>
    </div>
</div>

The bulk of the markup is the <table> element that contains the username and password textboxes, the "Remember me" checkbox, and the "Log In" button. Note how all of these inputs are HTML. There are no Web controls in the login user interface save for the HyperLink control that links to the Register.aspx page.

The login user interface is encased in a <div> element with an id of loginUI. There is a CSS file (LoginUIStyles.css) that defines the styling for this <div> element (see Listing 2). In particular, the loginUI <div> element has its display attribute is initially set to none, which is why the login user interface is not visible when viewing a page until the "Log In" link is clicked. As we'll see momentarily, when the "Log In" link is clicked JavaScript is used to change the display attribute, as well as to position the login user interface in the center of the browser window.

Listing 2 - The CSS styling for the login user interface.

#loginUI {
    width: 300px;
    border: 1px solid black;
    display: none;
    position: absolute;
    z-index: 5001;
}

The loginUI <div>, by itself, merely shows the login user interface. In order to gray out the page content we need another HTML element, which I've named loginUIOverlay (see Listing 3). As with the loginUI <div>, the loginUIOverlay <div> is hidden initially. But when the user clicks the "Log In" link the element is displayed and resized to cover the entire browser window.

Listing 4 shows the CSS styling for the loginUIOverlay <div>. Note how it is configured to be translucent, which is why you see the page content underneath the loginUIOverlay <div>. Also note that the loginUIOverlay <div> element's z-index attribute is set to 5000, which is one less than the z-index for the loginUI <div>. This ensures that the login user interface appears above the loginUIOverlay <div> (and that both <div>s appear above the page content).

Listing 3 - The HTML for the loginUIOverlay <div>

<div id="loginUIOverlay"></div>

Listing 4 - The CSS styling for the loginUIOverlay <div>

#loginUIOverlay {
    position: absolute;
    display: none;
    top: 0px;
    left: 0px;
    width: 0px;
    height: 0px;
    background-color: #aaa;
    opacity: .70;
    filter: alpha(opacity=70);
    z-index: 5000;
}

With the HTML and CSS for the login overlay in place, all that remains is the JavaScript to display the overlay when the user clicks the "Log In" link. The showLoginUI JavaScript function in Listing 5 is executed whenever the user clicks the "Log In" link.

showLoginUI starts by getting references to the HTML elements of interest, namely the loginUIOverlay <div>, the loginUI <div>, the invalidCredentials <div>, and the loginUsername textbox.

Next, the browser window's height and width are determined. The loginUIOverlay <div> element's height and width attributes are then assigned these values and the <div> element is displayed. This has the effect of "graying out" of the existing page content.

Following that, the loginUI <div> element's left and top attributes are set so that the login user interface is horizontally and vertically centered within the browser window. The loginUI <div> element is displayed using jQuery's fadeIn function, which adds a little pizzazz to the user experience.

And lastly, the invalidCredentials <div> element is hidden and focus is set to the loginUsername textbox.

Listing 5 - The showLoginUI function displays the login overlay.

function showLoginUI() {
    var loginUIOverlay = $("#loginUIOverlay"),
        loginUI = $("#loginUI"),
        invalidCredentials = $("#invalidCredentials"),
        loginUsername = $("#loginUsername");
    
    var docWidth = $(document).width(),
        docHeight = $(document).height();
 
    loginUIOverlay.width(docWidth)
                  .height(docHeight)
                  .show();
 
    loginUI.css({
        "left": (docWidth / 2) - (loginUI.width() / 2) + "px",
        "top": (docHeight / 2) - (loginUI.height() / 2) + "px"
    })
          .fadeIn();
 
    invalidCredentials.hide();
 
    loginUsername.focus();
}