Related Pages: Message Popups, Dialogs
| Table of Contents |
|---|
Description
A popup is a small window which appears over the primary screen, designed to display important information or collect information from the user.
Popups appear as a result of a user action, such as clicking a button, a link or a menu action.
Popups must be dismissed by the user before returning to the primary screen.
Types
Type | Usage | Example |
|---|---|---|
Displaying warnings, error messages, and important information. |  | |
Collecting information from the user, or allowing them to make decisions. |  |
...
A popup window usually appears as a result of a user clicking a button, an icon, or a link.
Structure
A popup window consists of:
A colored header, including:
a title.
a closing button (X).
a help button (optional).
A content area, which may contain text, inputs and controls.
Buttons, including:
a primary action button.
a secondary action button, if relevant.
other action buttons, if relevant.
The popup appears over a semi-transparent background.
...
The popup can be closed by either:
clicking the close (X) button,
clicking the primary or secondary action buttons, or
pressing the Esc key.
Clicking outside of the popup will not close it.
For interactions within dialog boxes see Dialogs.
Validations and errors
Message popups do not require special validations.
For information about dialogs validations, see Dialogs.
Transitions
The semi-transparent background will appear and disappear with a fade effect.
The popup window itself will appear and disappear with a fade effect.
...
Design
See Message Popups and Dialogs.
Code
See Message Popups and Dialogs.