Related Pages: Message Popups, Dialogs

Description

A popup is a window which appears over the primary screen. It usually appears as a result of a user action, such as clicking a help icon. A popup must be dismissed by the user before returning to the primary screen.

Types

Type	Usage	Example
Message Popups	To display warnings, error messages, and important information.
Dialogs	To collect information from the user, or to allow them to make decisions.

...

• A popup window usually appears as a results of a user action, such as clicking a button, icon, or link.

Structure

A popup window may contain:

• A colored header, including:

  • a title.

  • a closing button (X)

  • a help button

• 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 header may contain hard-coded text, a dynamic field, or a combination of both.

• A common usage is to have the object that the popup refers to as a title, for example: TBD

Interaction

• The popup can be closed by either clicking the close (X) button, or by clicking the primary or secondary action buttons.

• Clicking outside of the popup will not close it.

• For interactions within dialog boxes see Dialogs.

...