Dialog boxes - modal windows
Also referred to as an overlay
Summary
A modal window is a layer on top of a page. It simplifies the user interface by providing a way for the user to access additional information without leaving current page. It is also an effective technique to catch user’s attention
Code
Example (in use, with an interaction, in context)
Example
Related patterns
Problem
There is a need to interrupt current process and catch the user’s full attention to something really important. (For example to notify the user about some major changes to your service since the last login, tell the user that his login has expired and provide a login form to let him login again, warn the user about doing something that is not reversible etc.)
You need to display user actions or other options that are “independent” from other pages.
Placing them in an overlay saves the user a return trip to another page and makes it easy to get back to the original page where he came from.
It is important to show additional or related content/options in context