This article explains how to open a page, a composition or a media file on top of the current page, in a modal or a side panel. You will learn how to set the opening on a link and how to compose the look of the window in a template.
Before you start
- A modal is a window that opens on top of the page, in the center or in a bottom corner. A side panel slides in from the right. The visitor does not leave the page they are on.
- The opening is set on the link that leads to the content. The look of the window is composed in a template.
- The content is loaded at the moment of the click, without reloading the page. As long as nobody opens the window, it does not slow the page down.
Open a link in a modal
The following example opens the contact page in a side panel from a button.
- Select the button and open the Settings tab, Link panel.
- Enter the page’s URL, or choose it among the site’s contents.
- In Link opening, choose On the right side.
| Choices | Opening |
|---|---|
| Classic (in the browser tab) | The browser loads the page, as for an ordinary link. Default value. |
| In a modal | A centered window. |
| Modal at the bottom left, Modal at the bottom center, Modal at the bottom right | A window anchored in a bottom corner. |
| On the right side | A side panel that slides in from the right. |
The Link panel is the same on the Container, the Heading, the Simple block, the Media, the Button, the links of the Navigation and the card of a content list. A link placed on words of a text offers it too, in the link’s sidebar.
- A composition or a media file always opens on top of the page: the classic opening is not offered.
- An address in
mailto:, intel:or an anchor in#opens in place: the panel removes Link opening. - The same content can open in a modal from a button, in a side panel from a menu and as a classic page from another link.
Understand the new tab checkbox
A modal opens on the page while a new tab leaves it. The two contradict each other. As soon as a modal or a side panel is chosen, Open in a new tab is unchecked and grayed out.
| Situation | Checkbox state |
|---|---|
| Classic (in the browser tab) | Available, unchecked by default. |
| A modal or On the right side | Unchecked and grayed out. |
| A link to a composition or a media file | Unchecked and grayed out permanently. |
| Hide the link from search engines turned on | Unchecked and grayed out, with Nofollow, even in classic opening. |
Back on the classic opening, the checkbox becomes available again, unchecked.
Compose the window in a template
The look of a modal or a side panel is composed in a template, like that of a page. Each position has its template: Modal, Modal at the bottom left, Modal at the bottom center, Modal at the bottom right and Side panel.
- In the admin menu, open Templates, then click Add a template.
- Choose the position, for example Side panel, then the target content type if the window asks for it.
- In the template’s editor, insert the Overlay block and choose its variant: Modal, a modal at the bottom, or Side panel.
- In the Overlay panel, place a heading, the blocks you want and the Post content block where the opened content must appear.
- Add a Dismiss overlay block, then publish the template.
A new template is saved as a draft: it is only used once published. The most specific template wins: a modal template made for a content type takes precedence over the generic Modal template. The three bottom modals take the Modal template when they have none of their own. The side panel does not fall back to the Modal.
| Block | Role |
|---|---|
| Overlay | The block that surrounds the window. It always contains a Exit overlay and a Overlay panel. It carries the position and the closing. |
| Exit overlay | The backdrop placed over the page behind the window. You mostly set its color. |
| Overlay panel | The content frame. It accepts all blocks, is styled like a container and offers a Display in block, flex or grid. |
| Dismiss overlay | A button that closes the window on click, to place wherever you want in the panel. |
| Setting | Effect | Default value |
|---|---|---|
| Position, in the block’s toolbar | Center, Bottom left, Bottom center, Bottom right or Side panel. | Center |
| Click outside to close, panel Overlay settings | Closes the window when the visitor clicks the backdrop. | On |
Overlay, Exit overlay and Overlay panel exist only in a template’s editor and in the consent banner’s editor. In a page, you only set the link’s opening.
An AI connected with the right on templates can compose this template for you: the backdrop, the panel, a heading at the top and a close button.
Publish the two required templates
The Modal and Side panel templates are required: the site does not go to Production until they are published on the Staging. They are two of the steps in the dashboard’s Setup checklist box, Design the generic modal and Design the side panel. The creations catalog offers Modal: generic for both, with the backdrop, a heading, the opened content and a close button.
Make the window usable with a keyboard
Everything that opens on top of the page follows the same rules, with no setting: a modal, a side panel, the mobile menu and the consent banner.
| Behavior | For the visitor |
|---|---|
| The window announces itself as a window, under a name | A screen reader says that a window opened and reads its name: the first heading in the panel. |
| Keyboard focus enters the window | The Tab key moves through the window, not the hidden page behind it. |
| Tabbing loops | After the last element, Tab returns to the first. Shift+Tab goes the other way. |
| The page underneath is put to sleep | Neither the keyboard, nor the mouse, nor the browser’s search reaches it. |
| Esc closes the window | If a dropdown list is open in the window, Esc closes it first, then a second press closes the window. |
| Focus returns to where it came from | On closing, the keyboard goes back to the link or button that opened the window. |
| Close buttons are real buttons | They can be reached by keyboard, activated with Enter or Space and are announced as Close. |
Two settings remain yours.
- Start the panel with a heading. A window that starts with the heading “Contact us” is announced that way. Without a heading, it is announced as Dialog, which tells the visitor nothing.
- If the trigger shows only an icon or an image, fill in the Accessible name field of its Link panel.
Open a window on a multilingual site
A window is displayed in the language of the page it is opened from: its labels and the content lists it contains. The words written in a composition, however, stay in the language you wrote them in. Plan one composition per language and point each link to the right one.