1. Overlay
An overlay is a general term for any content layer or visual element that appears on top of the main content. The background is often dimmed or partially obscured to draw attention to the overlay.
Purpose: Used to focus the user's attention on specific content or interactions. Content is displayed within a viewport.
Examples: A burger menu that opens as an overlay or a search window appearing over the main content
2. Modal
A modal is a dialog box or window that requires user interaction before the main page can be used again. It is typically centered on the screen.
Purpose: Important but short content is displayed in a modal and forces the user to take action. Scrolling should only be necessary in very rare cases.
Examples: Login or registration form, Shopping cart or Confirmation dialogs for interactions
3. Popup
A popup is a small window or box that appears over the page content. It is often triggered by user action or automatically after a delay. Unlike modals, a popup does not necessarily block interaction with the rest of the page.
Purpose: Displays non-critical or additional information without requiring user action. Often triggered automatically.
Examples: Short content like prompts for newsletter signups, Tooltips or informational hints
Note: In some contexts, "popup" refers to a browser popup, which is a completely separate browser window (less common due to popup blockers).
4. Lightbox
A lightbox is a specific type of modal used to display media content such as images or videos. The background is dimmed, and the content is prominently shown in a frame.
Purpose: Displays media without requiring the user to leave the current page. Content is aligned within a viewport.
Examples: Few contents, often enlarged images in a photo gallery, Video previews or playback.