# Open a modal or a side panel

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.

1. Select the button and open the **Settings** tab, **Link** panel.
2. Enter the page’s URL, or choose it among the site’s contents.
3. In **Link opening**, choose **On the right side**.

![A button’s Link panel: the URL /contact/, the Hide the link from search engines switch, Link opening set to On the right side, the Accessible name field, Nofollow, then Open in a new tab grayed out.](https://static.lovelyrender.com/uploads/2026/10/998-doc-pages2-lien.png)

| 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:`, in `tel:` 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.

**Note:** A link opened in a modal does not help Google find the page: it leads to the URL that builds the window. For a page to be indexed, a classic link must lead to it elsewhere on the site (a menu or the footer).

## 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**.

1. In the admin menu, open **Templates**, then click **Add a template**.
2. Choose the position, for example **Side panel**, then the target content type if the window asks for it.
3. In the template’s editor, insert the **Overlay** block and choose its variant: **Modal**, a modal at the bottom, or **Side panel**.
4. In the **Overlay panel**, place a heading, the blocks you want and the **Post content** block where the opened content must appear.
5. 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.

**Note:** On the Staging, as long as these templates are missing, a content opened on top of the page takes its own template. A page opened in a modal is then displayed with the **Pages** template, the site’s header and footer included. If you can create templates, the window instead shows you the modal or panel templates the site looked for, each with its **Create this template** or **Open the draft** link. Your visitors never see this case.

## 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.

## See also

- [Choose the look with templates](https://lovelyrender.com/documentation/decide-look-templates/)
- [Write the header, menu and footer once](https://lovelyrender.com/documentation/header-menu-footer-once/)
- [Check the accessibility of your pages](https://lovelyrender.com/documentation/check-accessibility/)
- [Button](https://lovelyrender.com/documentation/button-block/)