⏾ Concept Map

Modal ○꠹ Entries

↩ 🔵 🔵 🔵

Primary

၊၊||၊|။

Modal ○꠹｜Definition｜1st｜20260616000133-00-⌔

Modal window - Wikipedia

In user interface design, a modal window, or modal for short,12 is a graphical control element subordinate to an application’s main window.

A modal window creates a mode that disables user interaction with the main window but keeps it visible, with the modal window as a child window in front of it. Users must interact with the modal window before they can return to the parent window. This avoids interrupting the workflow on the main window. Modal windows are sometimes called heavy windows or modal dialogs because they often display a dialog box.

User interfaces typically use modal windows to command user awareness and to display emergency states, though interaction designers argue they are ineffective for that use.3 Modal windows are prone to mode errors.345

On the Web, they often show images in detail, such as those implemented by the Lightbox library, or are used for hover ads.67

The opposite of modal is modeless. Modeless windows don’t block the main window, so the user can switch their focus between them, treating them as palette windows.

Printed 2026-06-28.

(echo:: @ ᯤ)

Footnotes

  1. Segun, Daniel (2022-09-07). “Are Modals In Web Design A UX Disaster?”. Retrieved 2025-09-26. ↩

  2. Coyier, Chris (2016-07-18). “Considerations for Styling a Modal”. CSS-Tricks. Retrieved 2025-09-26. ↩

  3. “Never Use a Warning When you Mean Undo”. alistapart.com. Retrieved 2015-10-09. ↩ ↩2

  4. Raskin, Jef (2000). The Humane Interface. United States: Addison Wesley. ISBN 0-201-37937-6. ↩

  5. “Nitpicker/The Humane Interface”. nitpicker.pbworks.com. Rule 1a. Retrieved 2015-10-09. ↩

  6. Quince UX patterns explorer. “Modal Panel”. Archived from the original on 2010-02-27. The popular Lightbox JavaScript library uses a modal panel approach for showing the images ↩

  7. Jakob Nielsen, Alertbox. “10 Best Application UIs”. ↩

Link to original

Secondary

• • •