in Design

20 Examples Of Modal Windows In Web Development

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:


Bogdan is the founder of Top Design Magazine. You can find him in Bucharest-Romania so next time you want to drink a beer there and talk about web and stuff, give him a message.