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 / Modal 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.
Dismiss event
In Javascript, listen to the mouseup or mousedown not to the click event.
The reasons are:
- click event is prevented
- click will not fire:
- if you mousedown
- then move your mouse too much and/or wait a long time
- and then do mouseup.
Example
Software
Most software that will help to create overlay are positioning library