Internet Explorer is not supported by Design Library

The last version of Internet Explorer, version 11, was released on October 17, 2013. This is a very long time ago when taking into account the rapid development of web technologies. These days it is often difficult and time consuming to get modern technologies to work well in this old browser. More and more frameworks are dropping support, and even Microsoft themselves has announced that they will fully drop support for IE in their own services in 2021.

Consequently, we have decided to not include support for IE in the Design Library website.

Luckily, there are modern options in active development. Please use Firefox, Edge or Chrome instead.

Centered modal

Centered modal for full focus editing or display of important functions and information.

Centered modal

Component meta

Component identifier

component-centeredmodal

Tags

Global

Design principles

Everyday first

Guidelines

Short description

A centered modal appears in the centre of the screen and usually overlays the existing content. It is positioned in the middle, with the background content dimmed to bring focus to the modal.

Centered modals are useful when you want to capture the user's attention and focus solely on the modal's content. They work well for tasks that require user input, confirmation, or displaying critical information.

When and how to use it

Use this type of modal when you want the modal to be in full focus for user interaction or attention.

Behaviour

It's displayed in the centre of the screen. Its content should only scroll vertically. It should be customizable if clicking outside should close (default) the modal or not. If not blocked from closing, you should be able to close by: clicking outside, clicking close or pressing ESC in the keyboard. The modal is always full take-over when it’s a mobile viewport.

Placement

It’s displayed in the centre of the screen. If the modal doesn't fit, it shrinks with the screen leaving only a 32px margin with the overlay surrounding the modal.

Centered modal

Centered modal

Resizing behaviour

Resizing behaviour

Example for Payments

Example for Payments

Do's and don'ts

Do
  • Use the centered modal when you need the user’s full attention.
  • Design the content of the modal to be responsive to the screen size. 
Don't
  • Use the centered modal when users should be able to get a context of the page underneath the modal.

 

Writing

-

 

Accessibility

Make sure the modal is announced and that the tabbing-order stays inside the modal (you need to close it before tabbing to other items on the page).

 

Specification

General specification

Specific for logged-in web

The modal will be implemented in 4 fixed widths, and 3 fixed heights. This needs to be fixed from the channel, because the content in the modal will be delivered from other sources.

Widths
  • Medium (default) 512px
  • Large 768px
  • X-Large 960px
  • XXL 1400px
  • In mobile viewports the modal become a full takeover: 100% width
Heights
  • Small 512px
  • Medium 740px
  • Large 960px
  • In mobile viewports the modal become a full takeover: 100% width

 

Related patterns & components

Component
Dialogue

Page last updated

Feedback

Was this helpful?