What Is a Modal and When Should I Use One?

Any experience on a website is like a mosaic of smaller design elements and decisions. Here’s one you’ve likely encountered: You’re browsing a site, and click some button. Immediately the page fades and a popup appears on your screen displaying some message or prompting an action, like signing up for an email list or downloading a content offer.

Maybe you were happy to see this popup, or maybe you were surprised and confused. But no matter how you reacted, this window definitely got your attention. In web design terms, this type of display is called a modal.

The purpose of modals can be summed up in one word: focus. If you need visitors to focus on something simple, a modal window is one of the most effective means to do so. Users must either close the modal, or complete a specific action within it (e.g., reading a message and clicking “OK”, filling out a form, etc.).

Here’s a simple example from the New Yorker. This modal prompts us to subscribe to their newsletter.

Image Source

Modals are polarizing among designers and users alike. Many find value in their ability to quickly bring attention to something essential, while others regard them as an unwelcome interruption to the user experience.

In practice, it all depends on whether the modal is well-designed and purposeful. When done right, they can be a helpful technique for both your users and for your numbers: According to a recent study of nearly 2 billion modal popups, the top 10% best-performers converted at a remarkable rate of 9.28%.

Benefits of Modals

Aside from channeling focus, modals present additional benefits over other display elements.

Simplicity

Modals keep things simple. Everything stays within one tab, helping visitors stay connected with what they were doing before the modal appeared.

Visibility

Since modals appear within the user’s active tab, you can be sure it will be seen. If instead the prompt were to appear in a new window, the user could miss it or instinctively close the new window after being conditioned by annoying ad popups.

Flexibility

Modals also help preserve page space by displaying featured media, like images or videos, in a lightbox.

Modal vs Modeless

We call this type of element “modal” because it introduces a secondary “mode” — or user interface — to the web page on which it appears. A modal window disables most of the page and requires users to focus on a specific window before continuing. Web designers call the modal window the “child” window and the rest of the page the “parent” window.

The opposite of a modal element is a “modeless” element, one which does not disable the parent window. Users can always interact with parent content while a modeless element is open. Examples of modeless elements include a dropdown menu, side panel, or a popup element that still lets users click on other page elements.

Modal vs Pop Up

Despite modals and pop ups having very similar functionality, the difference between the two comes down to the amount of attention they require: Modals do not allow you to interact with other elements on the page, which necessitates an immediate action on the user's part. In contrast, if the user chooses not to interact with a popup, they are free to continue interacting with the site while the popup remains on the screen until the user engages with it. This is because popups are modeless by design.

When Are Modals Used in Web Design?

Modal windows are effective any time you need users to see or do something specific. They typically (but not always) appear after some trigger event like a button click, scroll event, or some exit intent. The most common uses of modals in web design include warnings, alerts, confirmations, forms, media displays, and multi-step processes.

Warnings, Alerts, and Confirmations

For those times when a user really should see something, modal windows are excellent at directing attention. A modal can contain an alert about a significant event or error, a warning about the consequences of some action, or confirmation of a completed process. For example:

Image Source

Utilize modals only for the most critical messages. For example, errors that actively prevent a desired action from being completed (e.g., “We could not complete your request due to a server error. Please refresh the page and try again.”) and actions that cannot be reverted (e.g., “Are you sure you want to continue?”) are both sound reasons for a modal. A “cookie policy” alert, not so much — save this for a modeless notification window or bar.

Forms

If a process on your website requires user-submitted information, you can place a form inside a modal window. You’ll see this often as an alternative to a dedicated page for login/signup, or one that promotes an email newsletter, content offer, or discount code.

Many websites, such as the Boston Globe, restrict their content to members only, and this can be signaled to non-members via a modal:

Image Source

Usually, the trigger for this type of modal is a CTA click or other button click, but it’s also common for sites to throw a modal after a scroll event. It’s up to you whether you deem this trigger too distracting, but know that some visitors will be bothered by this if they deem it irrelevant.

Media Displays

Media often supports the main content of a webpage and sets the tone for the browsing experience. However, if an image gallery or video serves as a focal point on your site, a modal window lets visitors view it in isolation without needing to open it in another page.

For example, a user may click a thumbnail on the parent page, which opens up a modal for a gallery of related images, easily navigable with arrow buttons on both sides of the window. This implementation is effective for product and portfolio displays in particular.

A thumbnail can also open a video modal, which displays the video like its own little theater, then closes once the video completes. Internet service provider Starry’s website information page lists a few videos which present this way:

Image Source

An additional benefit of using modals to display media is space efficiency. Media tends to occupy valuable page space, but making a gallery or video player accessible with a smaller thumbnail saves valuable real estate.

Multi-Step Processes

For lengthier, more energy-intensive actions on your website — creating a user profile, signing up for a service, or completing a tool setup — consider separating each step into its own modal window so the experience feels more manageable. This technique is common in software applications in the form of a “wizard” or “installer guide.” Progress should be shown within the window as a bar, a sequence of small dots, numbers, or some other indicator.

Pinterest does this well with their account creation process. Notice the progress indicator at the top.

Image Source

Modals are so common across the web that your visitors can tell a useful modal from a pointless or poorly designed one. Ensure your modals are high-quality by sticking to these eight best practices for modal window design:

1. Use modals intentionally and infrequently.

Modals are disruptive by design. They tend to appear unexpectedly in the flow of the browsing experience, and always shift focus away from their parent window. This is a high cost for the user, so modals should always assist the user in their goals, not obstruct them.

To keep visitors from becoming annoyed with your site, only deploy modal windows when you absolutely need to, and only if they assist the user with their primary goal. Anything less, and users might forget their original goal and grow frustrated.

Here are some best practices for the common modal uses:

• Warnings and Alerts - Only crucial errors and permanent actions should prompt a modal display.
• Forms - Stick to those which gather required information or at least significantly improve their experience on your site. And all steps in a multi-step modal process should be highly relevant to the users’ end goal.
• Other Elements - For any interactive elements or steps that don’t qualify, use a modeless display instead.

2. Deactivate all background elements.

In order to effectively draw all attention to the modal, all background elements must be visually and functionally phased out behind the child window. You can do this with:

• Visual Effects - Modals typically blur and/or darken most or all parent elements. This gives the impression that the modal window sits above the other content. some drop shadow around the modal can also create this effect.
• Deactivating Functionality - Ensure that no page element outside the modal window is clickable or selectable via the keyboard, and consider disabling scrolling as well. Any extra functionality from the parent page will send mixed signals about the purpose of the modal.

Another important note: Since a modal renders all other page content inaccessible until closed, all the information users need to complete the modal must be provided within the modal window itself. Users shouldn’t need to refer back to parent content to address the modal — any task which requires this switching is better suited for a modeless display.

3. Write clear instructions and button text.

To help users quickly adjust to the modal display and understand why it’s there, make all text as brief and clear as you can. All modals should include title text which states the intention of the modal or the action required. Write your button text and other action prompts to be concise and intuitive as well.

4. Give users an out.

Every good modal window allows at least one action, the option to close it. Convention says that the window should disappear after a user presses the escape key, or clicks an “X” symbol or “Close” text in the top left or right corner of the modal window.

You might also elect to close the window when users click outside of the modal, and consider placing a “Cancel” button within the modal as an alternative to a “Continue” button.

5. Size your modal window appropriately.

Modals should appear as a layer on top of the parent window. Make it too large and users might think the modal is an entirely new page too small and users could mistake it for an ad.

A good guideline is to restrict the modal window to at most 50% of the browser window width, and roughly the same for height, though the exact dimensions will vary based on what you place in the modal.

6. Introduce and close modal with a fade.

Include a transition effect to ease the switch from parent window to child window. A brief fade-out of the background content and fade-in of the modal window will work well in nearly any scenario — a more eventful transition (e.g. a slide-in) or no transition might seem jarring to some.

Back to our Starry example, note how the video modal quickly but smoothly fades into view, while background contents are dimmed:

Image Source

7. Limit modals on mobile.

All of the design features I’ve described work great for desktop screens, but mobile devices are a different story. The reduced screen size makes it harder to achieve the window-within-a-window look without appearing too large or too small.

Where you might place a modal on your normal site, consider instead adding a modeless element or placing your modal content on a new page entirely. If you’d prefer modals on your mobile site, test to make sure they’re responsive, legible, and easy-to-use.

8. Design your modals for accessibility.

I’ve already touched on a couple web accessibility pointers in this list — here are some common practices to make your modals usable for everyone:

• Every clickable action in the modal should also be possible with the keyboard. The escape key should close the window, and the tab and enter keys can be used to select options.
• All other elements outside the modal should not be accessible by the keyboard as long as the modal is in view.
• The modal window should visually contrast with the background page.
• Transitions into and out of the modal should be smooth and non-flashy.
• Any images, video, or other media items should include descriptive alternative text.
• All text and media can be interpreted by screen readers and other assistive technologies.

How to Implement Modals in CSS

To add a basic modal window to your site, one option is to use CSS and HTML alone. Most of the design factors we’ve covered in this guide can be tweaked with a bit of CSS know-how. If you're looking for a more comprehensive guide, check out our ultimate guide CSS here, or you can use a free template from Free Frontend or Material Design for Bootstrap.

However you decide to implement your modal, remember to limit their use to only essential cases. It’s okay to demand attention from the user every once in a while, as long as it ultimately serves their end goal and provides enough value to justify a brief disruption. For every modal, understand its purpose in the visitor’s journey and stick to our best practices for design and function.

Editor's note: This post was originally published in September 2020 and has been updated for comprehensiveness.