Add a modal (pop-up overlay) to a chapter or event page in Page Builder by attaching Open modal to a button or container, then fill the modal with blocks.
Note: Modals work on both chapter and event pages when Page Builder is enabled. Anyone who can edit the page in Page Builder (community admins, and organizers with page builder permissions) can add or change modals. The steps are the same for chapter and event pages.
Before you start
A modal is a pop-up overlay. Attach it with Open modal on a button or container, then fill the overlay with blocks from the left panel.
Launch a modal from a button
- Open the page in Page Builder.
- Select a button.
- Actions → Open modal.
- Select the modal control on the canvas.
- Add content into the modal.
Tip: Enabling Open modal adds a container inside the modal by default so you have a place to drop content.
Launch a modal from a container
- Select a container → Actions → Open modal.
- Open the modal control and add content.
- Event pages: People bios and image gallery may already use this pattern.
Modal size, scroll, and centering
- Size follows content; 16px page margin is the applied limit.
- Overflow scrolls inside the modal.
- Content is centered vertically and horizontally.
- Overlay is fixed to the viewport.
How visitors dismiss a modal
| Method | What visitors do |
|---|---|
| Close (X) | Select the X control near the top-right of the modal. |
| Escape key | Press Esc on the keyboard. |
| Outside the modal | Select the dimmed page area outside the modal content. |
| Close modal button | Select a button inside the modal that uses the Close modal action (you configure this in Page Builder). |
Add a Close modal button
- Open the modal on the canvas.
- Select a button inside the modal.
- Actions → Close modal.
Edit or remove a modal
- Edit content via the modal control on the canvas.
- Change or clear Open modal on the trigger under Actions.
- Delete blocks inside the modal; clear Open modal when unused.
- No separate modal permission — page edit access is enough.
Mobile and responsive behavior
Same overlay across breakpoints; content sizes, centers, and scrolls in the viewport-fixed overlay. Preview in device modes before publishing.