UI - Overlay

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

• Lightbox with Bootstrap Modal
• What is and how to create a web modal in pure HTML, Bootstrap and Jquery?

Software

Most software that will help to create overlay are positioning library