css tricks Modal Login Pages

Please Visit My Profile Page To See All My Blogs Thanks 

Http://Www.Blogger.Com/Profile/08427350034167098841

In user interface design, a modal window is a child window which requires the user to interact with it before they can return to operating the parent application, thus preventing the workflow on the application main window.

These are common in desktop applications when a program needs an important decision made. They are becoming more and more popular in web applications thanks to the JavaScript "light box" (or one of it's other many pseudonyms). Undeniably, they are overused. However, there are circumstances where modal boxes make sense and are used effectively to focus a users attention to the important task at hand. In some situations, logging into a website is one of these important tasks.
In my regular daily web travels, I encounter several. These aren't "light boxes" with the transparent overlay and animated popup shenanigans, but they fit the definition of a modal box.


Freshbooks:



Wufoo:





Grooveshark:





Scrapblog:







Here's a free one





As always, we are going to keep the code clean and semantic. No extra junk. That way it's perfectly usable and accessible, and lightweight to boot. Here is what it looks like with no CSS:





I won't bore you with listing all the code here. There isn't much to it! Just a simple form area and with a few images applied in the CSS.