> For the complete documentation index, see [llms.txt](https://outdraw-academy.gitbook.io/ux-patterns/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://outdraw-academy.gitbook.io/ux-patterns/popup.md). # Popup {% embed url="" %} Popups usually require interactions from the user or provide additional information. Popups can vary in size — from very small to full-screen. > Popups are above all other elements on the Z-axis.

*** ## Characteristics ### **Constrained focus — modal vs. non-modal** The key difference between modal and non-modal elements lies in the level of interruption and interaction restriction. * **Modal elements** demand user attention by blocking interaction with the rest of the interface until the task is addressed. They interrupt the workflow and have the highest level of importance. Users cannot access the underlying layer either via regular not keyboard navigation. Modals have their own context.

* **Non-modal elements** allow users to interact with the interface without requiring immediate attention or interrupting the overall workflow. They do not impose context.

💡 In some design systems, you can encounter a component named ‘modal’. Usually, it is a modal dialog, it’s a naming inconsistency since… > Modality is a characteristic, not the name of a component itself. ### [**Backdrop**](/ux-patterns/backdrop.md) In some cases, popup elements have a backdrop. Usually, it’s an overlay with lowered opacity that serves as a visual cue that… > Signalizes that the content behind it is not available for interactions ❌. It helps users focus on the popup and avoid confusion when trying to interact with the main page content.

**Light vs. explicit dismiss** The third dimension to consider is how users dismiss a component. * ***Explicit dismiss*** is when a component allows a user to dismiss it, for example, using a close button (x icon), cancel button, or the escape key.

Explicit dismiss using the 'cancel' button

* ***Light dismiss*** means that a component disappears automatically under certain conditions (scroll the page, click outside of the component, or hover out of the button that was triggering it).

Light dismiss - hover out of the triger element

*** ## Examples Popups can serve various purposes, including notifications, alerts, or even modal dialogs.

*** ## Categorization Popups are included in a group called [overlays](/ux-patterns/overlay.md). 💡 The main difference is that popups serve the purpose of enabling interaction or providing information, whereas **overlays also include purely graphical elements**.

--- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://outdraw-academy.gitbook.io/ux-patterns/popup.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.