100 Outstanding Login Forms

Re:100 Outstanding Login Forms by johnohara on Tuesday July 07, 2009 @02:31PM (#692099)

I've always liked the approach American Greetings uses for their sign-in. Similiar to the LightBox script except the only way to exit is to click the 'close' icon. Clicking the page beneath does nothing. Feels very intuitive.

[ Parent | on HN ]

Re:100 Outstanding Login Forms by Slumberthud on Tuesday July 07, 2009 @02:47PM (#692146)

Any idea how they keep the clicks from escaping the login dialog?

[ Parent | on HN ]

Re:100 Outstanding Login Forms by Batsu on Tuesday July 07, 2009 @03:38PM (#692265)

Using the z-index CSS property, a property for layering content on pages.

At the top of their source before the actual page content starts, they've got a div at z-index: 999 which covers the whole content area, then the login appears at z-index: 1000. Any clicks outside the login box land on the other div, and not on the content below. When the div is hidden (as it is when you first visit the page) the page operates as expected.

[ Parent | on HN ]