Skip to content
Popup
Overview
A customizable popup modal component that displays content in an overlay triggered by a button. Provides smooth animations, responsive behavior, and extensive styling options through block settings.
Common use cases
- Use semantic HTML within popup content for better accessibility
- Keep popup content concise to avoid overwhelming users
- Consider mobile viewports when designing popup content
- Test keyboard navigation and screen reader compatibility
- Use appropriate color contrast for overlay background
Compatible blocks
The following blocks can be nested within this block:
- Container (for popup content)
Block settings
General
| Setting | Description | Options |
|---|---|---|
| Show advanced settings | Reveals close button, full background, colors, inheritance, margin, width, and device visibility | Checkbox (default: false) |
Content
| Setting | Description | Options |
|---|---|---|
| Overlay preset | Select a preset overlay ID or use a custom one | • Account |
| Overlay ID | Custom identifier for the overlay (used to trigger it programmatically) | Text input |
| Show close button | Displays a close button in the popup | Checkbox (default: false) |
| Enable full background | Makes the popup background cover the entire viewport | Checkbox (default: false) |
Color
| Setting | Description | Options |
|---|---|---|
| Type | Custom scheme vs preset surface colors | • Custom Visible when Show advanced settings is on and Enable inheritance is off |
| Color scheme | Background and text pairing | Color scheme picker Visible when type is Custom, Show advanced settings is on, and Enable inheritance is off |
| Color scheme | Background and text pairing | • Body background (default) Visible when type is Base, Show advanced settings is on, and Enable inheritance is off |
| Border color | Popup border | • Subtle (default) Visible when Show advanced settings is on, type is Base, and Enable inheritance is off |
| Enable inheritance | Inherit colors from the closest parent with a set scheme | Checkbox (default: false) |
Layout
| Setting | Description | Options |
|---|---|---|
| Margin | Outer margin around the popup | • Default Visible when Show advanced settings is on |
| Enable custom width | Enables a custom width percentage | Checkbox (default: false) |
| Width | Popup width | 0–100 % (default: 100 %) |
Display
| Setting | Description | Options |
|---|---|---|
| Visibility | Controls when the block is visible | • All (default) Visible when Show advanced settings is on |