SlowlyThe builderBlocks
Modal
A pop-up panel that appears over the page, opened by a trigger.
The Modal block shows content in a panel that appears over the page, dimming what is behind it until it is closed. It suits sign-up prompts, quick details, and anything you want to surface without sending the visitor to another page.
Adding one
- Select the section or container to hold it.
- Open the inserter and search "modal".
- Pick the Modal block, then fill the panel with any blocks you like.
Settings
In the modal's own panel. Appearance and layout of the panel itself live in the shared design panel.
| Setting | What it does | Reach for it when |
|---|---|---|
| Trigger | What opens the modal: a click, a scroll direction, a URL condition, or a custom condition | Anything other than a plain button click |
| Show again | How often the modal reappears for the same visitor: every visit, once per session, or never again | Cookie-gated offers or one-time onboarding prompts |
| Hide for logged-in users | Suppresses the modal for authenticated visitors | Promotions aimed only at guests |
| Animation | The enter and exit motion: fade, slide, zoom, or none | Matching the page's motion tone; none is kinder to reduce-motion |
| Duration | How long the animation takes | Speeding up a fade or slowing a slide |
| Overlay colour | The dimmed backdrop colour and opacity | Keeping the overlay on-brand or darkening it for focus |
| Panel alignment | Horizontal and vertical position of the panel within the viewport | Centred dialogs, corner notifications, or bottom sheets |
| Close on overlay click | Clicking outside the panel closes it (on by default) | Turning it off for required acknowledgements |
| Close on Escape | Pressing Escape closes it (on by default) | Turning it off for required acknowledgements |
| Prevent page scroll | Locks the page scroll while the modal is open (on by default) | Turning it off when the panel itself scrolls |
| Reset scroll on close | Returns the panel to the top when it closes | Long panels the visitor may have scrolled through |
| Close other modals | Closes any other open modal when this one opens | Ensuring only one panel shows at a time |
Styling
The panel is a container block, so the full design panel applies: spacing, size, colour, type, borders, and effects, each per breakpoint. The states panel covers the overlay and any interactive elements inside.
Accessibility
- Add a visible close button inside the panel. A keyboard user needs a focusable target to dismiss it, not just Escape.
- Keep focus inside the modal while it is open so Tab does not wander the dimmed page behind it.
- Write a descriptive label for the trigger, so a screen reader announces what will open, not just "button".
- If the modal contains motion on entry, check that it respects the visitor's reduce-motion preference.