UI - Overlay

Card Puncher Data Processing


An overlay component is a component that comes above the actual components in a absolute position.

In Html, it would have a higher value on the z scale (ie z-index)

When two elements overlay each other, they overlap.


Because they differ only in their characteristics, most libraries offer them all.

All these elements are overlays:

  • A modal needs a click to show up
  • A dialog generally wraps a form.
  • A popover - An interactive mini-dialog floating element that displays information related to an anchor element when the element is clicked.
  • UI - Tooltip / Popup shows generally when the pointer goes over an element to add context
  • UI - DropDown - they are used in menus and forms to show a list of choice
  • A lightbox needs a click to show up and shows a video or image against a dark background.



Most software that will help to create overlay are positioning library

Recommended Pages
Devtool Chrome Event Listener
DOM - Blur Event

blur is an event that occurs when an element lost focus (blur) (ie is not the active element anymore) focus event Close an overlay (such as a dropdown menu) Reset a state
Card Puncher Data Processing

A pop-up is an overlay window that: does not require any action to show up gives extra context information. It just popup when the pointer goes over an element.
Card Puncher Data Processing
UI - Dialog

dialog is a overlay window where an action is needed. is a window that comes at the top or bottom of the window - is a form that comes in the front of the page - is a window that comes when...
Card Puncher Data Processing
UI - Overlap

When two elements overlay each other, they overlap. With the z-order, you can choose which one covers the other.
UI - Popover

A popover is a overlay graphic element that shows up (pops) over the actual graphic elements when the user makes an active action on an interactive/control element such as: typing in a input box...
UI - Tooltip

A tooltip is a sort of popover that: opens when the mouse is hovering over a target element closes when the mouse is leaving the target element It does not: requiert an active interaction (based...
What is and how to create a web modal in pure HTML, Bootstrap and Jquery?

A modal is a overlay window that is: displayed on top of the current page generally centered (or positioned from the top of window) and therefore not located near the control / interactive element...

Share this page:
Follow us:
Task Runner