Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Also referred to as an overlay

Summary  

Code

...

Example

Image Removed Image Removed 

Related patterns 

Problem 

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 attentionattention 

Code

Example (in use, with an interaction, in context)

Example

Image Added Image Added 

Related patterns 

Problem 

There is a need You want 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.)

...