Many types of websites, from online retailers to social networking sites, allow visitors to create user accounts. Such websites share a number of features in common: they all enable visitors to register a user account in some manner; they all must allow visitors some way to identify themselves in order to sign into the website; and they all have some feature or functionality that is only available to users who have signed in.

Traditionally, websites that support user accounts have their visitors sign in by going to a dedicated login page (such as www.example.com/Login.aspx) where they enter their username and password. Typically, users reach the dedicated login page either by clicking on a Login link somewhere on the page or by attempting to access a page they are not authorized to view. (By default, ASP.NET automatically redirects users making unauthorized request to the dedicated login page.)

One nitpick I have with dedicated login pages is that signing in involves leaving the current page to visit the dedicated login page. Consider the ASP.NET Forums. If a visitor who has an account with the site, but is not signed in, is viewing a post and decides she wants to add that post as a Favorite, she must first sign in. This involves clicking the "Sign In" link in the upper right corner, which takes her from the current page to the login page. Granted, once she's signed in she's redirected back to the post page, but with a bit of HTML, CSS, and JavaScript we could let the user sign in without leaving the post in the first place.

This article shows how to implement a login overlay, which is an alternative user interface for signing into a website. In a nutshell, when a visitor chooses to log into the website they are not taken to a dedicated login page, but rather have the login user interface displayed on the page they are currently visiting, laid atop the existing page content.

Figure 1 is a screen shot from the demo application available for download and shows the login overlay in action. In this screen shot the visitor has clicked the "Log In" link in the upper right corner, which has grayed out the page's content and displayed the login user interface atop it. After the visitor enters his credentials and clicks the "Log In" button, he is signed in and the page is reloaded so as to include any content that is present only for authenticated users.

This article shows how to use jQuery, ASP.NET, and the ASP.NET Ajax Library to create such a login overlay. The download for this article provides both an ASP.NET WebForms and ASP.NET MVC demo.

[Download Sample]