Modals

A modal or overlay can be used to:

  • Grab users' attention
  • Ask users for input
  • Show additional information

In most cases a modal will and should be user initiated.
However, sometimes it can be usefull to show a modal uninvited, e.g. to inform the user of a scheduled maintenance/downtime.

Modal Layout

A modal exists of the following elements:

  • Shadow: darken the background (lightbox effect) to draw the attention to the modal
  • Title: descriptive title
  • content
  • Escape possibilities:
    • At least an 'X' in the upper right corner.
    • Clicking outside the window.
    • Depending on the interaction a cancel/save-button combination should also be available.

In the presentationframe below, the layout of a modal can be seen, or click the 'open modal'-button to show a working example.

Modal Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Cancel