Popups

A popup (or dialog) is a window that elicits a response from the user. Many dialogs let people provide several responses at once. A popup can contain any type of content: - As an alert it provides important information about an error condition or warns the user about a potentially hazardous situation or consequence. - As a modal or panel it may provide additional information related to the active document or selection, controls concerning a task or a list of possible options to choose from. Both popup and popout need additional DOM structures and styling — e.g. boxes, frames, lists and buttons. They just provide a basic container that can be positioned with several modifiers (--n, --e, --s, --w, --local etc.). A popup is invisible at first, but can be activated via .is-active status. It appears above other content onscreen and can hide/block it with an overlay.

Source Code

To initialize the messages on this site we used this piece of less.

Default popup

This is a standard popup.

Popup positions

Example positioning: left (--w) and right (--e).

Variable content

You can use any other element in a popup.