UI - Overlay

Card Puncher Data Processing

About

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.

List

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.

Example

Software

Most software that will help to create overlay are positioning library




Discover More
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
Popup

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.
Positioning Engine

Position can be really tricky, that's why there is some positioning library. They are engines for making an absolutely positioned element stay next to another element on the page. : (Components:...
Card Puncher Data Processing
UI - Dialog

dialog is a overlay window (floating element) that requires immediate attention, appearing over the page content and blocking interactions with the page until it is dismissed through an action....
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...
Card Puncher Data Processing
What is a LightBox ?

A Lightbox displays images and videos by filling the screen and dimming out the rest of the web page. It's a central overlay (modal) that adds a dark background to give more contrast (ie more light) ...
What is and how to create a web modal in pure HTML, Bootstrap and Jquery?

A modal is a overlay window behavior: where its contents are the only elements that can receive focus. When open, the user cannot interact with the rest of the page (nor can screen readers) until...



Share this page:
Follow us:
Task Runner