Greybox and Lightbox

Popups are outdated

Popups were always rubbish and annoying, they took you out of a flow, you had little control over them, you can miss them when they pop up behind another window. And now, because of their security problems, broswers block them. And because they need javascript or target="_new" , they aren't accessible. So when you've got a bit of information that you need to show, but its not part of the main flow, how do you do it? And how do you do it accessibly?

Lightbox

Lightbox uses unobstrusive JavaScript to display images outside the main layout of your web page, on a layer above. Degrades to a link to the page if you don't have JavaScript enabled. Smaller version of this is LiteBox

Greybox

Similar to Lightbox, but it displays any content - like whole web pages. Greybox.

Thickbox

A more complex version. See demo. I'm not keen on the way that the layer scrolls jerkily to remain central to your browser viewing window.

Other examples

• Hoverbox
• Suckerfish dropdowns
• Suckerfish Hoverlight
• Suckerfish Hoverlight Redux

Ajax

Combining these techniques with Ajax, and adding everything to your site in an unobtrusive way, and giving fallback functionality, is a really powerful way to have an accessible site with great in-line add-on features.

Redbox

• Redbox
• MoodalBox
• SlimBox

My displayBox

• Motorcycle paint website with my inline popup code displayBox on the products and information pages