Modals
Last updated: September 10, 2015 at 21:08 pm

A content box appearing in the middle of a page that takes focus.


Visual example of the element:


What problem does this element or pattern solve?
This supplemental overlay window allows users to access a small page's worth of content or interactivity without the inconvenient feeling of having left the original page. Good for supplemental information, search filters, alerts or notifications, or options.
It applies to these platforms:

Desktop Web, Tablet Web, Smartphone Web

An example of this element or pattern in production:


Detailed specifications

Specifications To Consider

  • Carefully define the rules regarding when to use modals. They are quite easy to implement, so they have the potential for abuse.
  • Define the maximum size of the modal. Generally it is best to cover no more than 60% of the screen.
  • Explain how a user can close a modal. Clicking outside the container area? Clicking a close box? Or both?
  • Visual styling of the content container.
  • Define the background color and opacity. It is normally best to set opacity so the page below is obscured but visible. By doing this, the user will realize they are still on their desired page, but must interact with the modal in order to continue.
  • Can your modals display multiple-step content or panels? If so, what other patterns can be used as a modal?


Location of assets to build this element or pattern
Location of UX or visual design assets
Location of development code repository


Additional details
Information on research, user testing, or usability reports:

Not Applicable (Remember: no field should be blank!)

This element or pattern may also be known as:
overlay, pop-up, pop-over, lightbox, child window, heavy window, modal dialog, dialog box
Related elements within this Style Framework:

Not Applicable (Remember: no field should be blank!)



Owners and governance
UX or design 0wner
John Designowner
Email: design.owner@yourcompany.com
Business or marketing owner
Mary Businessowner
Email: business.owner@yourcompany.com
Development owner
Mike Devowner
Email: development.owner@yourcompany.com


Other information
Please include any other relevant information about this element or pattern:
Not Applicable (Remember: no field should be blank!)


Comments & Questions

Leave a Reply