Skip to main content
Frontend Glossary

UI components · Feedback

Modal

Also called: Dialog, Popup, Modal dialog, Modal window

A window that pops up in the middle of the page with a backdrop behind it. The user has to deal with it or close it before they can use the page again.

Click “Labeled” to see what each part is called, or “Anti-pattern” to see the most common mistake.

How to tell AI

Swap in your own content first

When I click the "New project" button, open a centered modal, 520px wide, with a semi-transparent black backdrop behind it. At the top, put a title and a close icon in the top-right corner. In the middle, put two fields: Name and Description. At the bottom right, put "Cancel" and "Create" buttons. Pressing Esc or clicking the close icon closes it. While submitting, the "Create" button shows a loading state.

Send to

01Decide

Does your content look like this?

Check both columns to confirm Modal is what you need.

Use Modal when

  • Before an irreversible action like delete or submit, the user needs to clearly confirm
  • The user needs to fill in a short form of 2 to 5 fields and then go back to the page
  • The user must read something or make a choice before the next step can happen

Pick something else when

  • You're just reporting the result of an action, like "Saved," and no decision is needed

  • The content is long or has many fields, so the window would need a lot of scrolling

    Use insteadDrawer

  • The user needs to look at a list on the page while filling things in

  • It's a full multi-step flow that needs a shareable link or should keep progress after a refresh

    Use insteadWizard

Not sure? Upload a screenshot and page analysis will check which layout each block should use.

02Pitfalls

Common misuse

It looks like it works, but it makes things harder for users.

  1. 01

    Popping up a modal after every successful action and making the user click "OK," which breaks their flow

    The wireframe below shows this case. The red dashed box marks the problem.

  2. 02

    Opening a modal on top of a modal, stacking layers until the closing order gets confusing

  3. 03

    Letting long content push the whole window past the screen, so the bottom buttons are cut off or unreachable

Anti-pattern, matches item 01

03Spot it

How to spot it

Look at the overall structure first, then check a few features you can spot at a glance.

Structure

A full-screen semi-transparent backdrop plus a centered window. Inside the window, from top to bottom, are a title bar (with a close icon), a content area, and a button area.

PartsClick one to highlight it in the wireframe above

04Explained

In detail

When a modal (also called a dialog or popup) opens, the rest of the page is covered by a semi-transparent backdrop and can't be used for the moment, so all attention goes to the window. It usually has a title, a content area, and buttons at the bottom ("Cancel", "OK"), with a close icon in the top-right corner. Pressing Esc also closes it. It's good for confirming an action, filling in a short form, or reading something that needs full attention.

Things it gets confused with: a Drawer slides out from the edge of the screen, holds more content, and works better for "browse the list while viewing details." A Popover opens right next to a button, has no backdrop, and holds only a little info. If you're just telling the user "Saved," a Toast is enough; don't interrupt them with a modal.

When building a modal: move focus into the window when it opens, and back to the trigger button when it closes. If the content is long, only the content area should scroll; the title and buttons stay fixed.

Developer info
Term ID
component-modal
DOM selectors

The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).

  • dialog[open]
  • [role="dialog"][aria-modal="true"]
  • [role="alertdialog"]
  • .ant-modal
  • .el-dialog
  • .el-message-box
  • [class*="MuiDialog-paper"]
  • .arco-modal
  • .t-dialog
  • .n-modal
  • .n-dialog
  • [data-slot="dialog-content"]
  • [data-slot="alert-dialog-content"]
  • .modal-dialog
Priority
1 · when several match at the same level, the higher priority wins
Version
v2 · updated Sep 29, 2026