Related Pages: Message Popup, Dialog
Lead: Liav Nadler Status colour Yellow title ongoing
| Table of Contents |
|---|
Description
A popup is a window that forces the user to interact with it before they can go back to using the parent application
...
Types
| Type | Usage | For more information |
|---|---|---|
| Message Popups | Display warnings, error messages and important information | See Message Popup |
| Dialogs | Collect information from users or allowing them to make decisions | See Dialog |
Usage & Behaviour
General guidelines
- A popup window may contain these elements:
- A colored header, including a title and a close button (X)
- A content area, which may contain text, inputs and controls
- A primary action button
- A secondary action button, if relevant
- Other action buttons, if relevant
Types
...
Usage & Behaviour
General guidelines
- The popup The popup header may contain a hard-coded text, a dynamic field or a combination of both
- The popup appears over a semi-transparent backgroundThe popup is centered horizontally and vertically on the screen
- The user cannot resize the width or height of a popup window
Positioning
- The user can move the popup across popup is centered horizontally on the screen
- The semi-transparent background appears and disappears with a fade effect popup will appear on 3/4 height of the screen (TBD)
- The popup window itself appears and disappears with a slide down / slide up effect (TBD)user will be able to move the popup across the screen
Interaction
- A popup window appears on users' action, usually clicking a button, icon or link
- The popup can be dismissed by either clicking the X button or by clicking the primary or secondary action button. Clicking outside the window?
- For interactions within dialog windows boxes see Dialog Dialogs
Validations and errors
- Message popups do not involve special validations.
- For validations and errors within dialog windows see Dialogs
Transitions
- The semi-transparent background will appear and disappear with a fade effect (TBD)
- The popup window itself will appear and disappear with a slide down / slide up effect (TBD)
Best practices
- A popup window should carry a limited amount of content. If the content you wish to display is too extensive consider using other patterns
- Avoid nested popups
...