A modal window or an overlay is a mini page in a layer on top of a page. modal windows simplify the user interface and provide a way for the user to access additional information without leaving current page. It is also an effective technique to catch user’s attention to something vital.

This windows disables the original page beneath the overlay. The user needs to take an action or cancel the overlay until he can continue interacting with the original page.

If you want to use a modal window you should know that they can be very annoying to users because they interrupt the user flow, making it impossible to interact with the page behind the overlay.

You should use a modal window when:

– You want to interrupt current process and catch the user’s full attention to something really important.

– You need to display application preferences or other options that are “independent” from other pages.

– It is important to show additional or related content/options in context.

– You need to get input from the user.

Below you can see 20 examples of modal windows for your inspiration:

topdesignfolder.com

patternry.com

learnboost.com

wpcoder.com

versionsapp.com

squaredeye.wufoo.com

collabfinder.com

zootool.com

store.apple.com

senzoo.ne

mealnation.com

macheist.com

tumblr.com

typedeskref.com

salesforce.com

gowalla.com

cnet.com

visual-paradigm.com

supermegaultragroovy.com

grooveshark.com