Sitecore SXA Overlay

A complete guide about setting up the Sitecore SXA Overlay feature.

The official documentation here: https://doc.sitecore.com/users/sxa/17/sitecore-experience-accelerator/en/create-an-overlay-link.html

Create an Overlay Page

In the Overlay Properties, you can define the size of your pop-up in the fields Height and Width in pixels, in case you want to use Percentage click on the check-box “Use Percentage”

This type of page has a Layout defined so you can edit it in the Experience Editor.
There you can add any component to be displayed on your pop-up, except for Sitecore Forms that won’t work out-of-the-box inside these Overlay pages.

To open this Overlay page on your pages…

Link component

Add a Link component and link it to the overlay page.

Next add the style “Links Shown in overlay” in component properties.

In the Rich Text

First click on “Insert Sitecore Link” and link to an Overlay page.

Then add the style “Open in Overlay” by clicking on “Hyperlink Manager”

Note: If you do not have this checkbox option follow the steps bellow.

Add missing “Open in Overlay” checkbox

First open the file in [website root]\sitecore\shell\Controls\Rich Text Editor\EditorPage.aspx

Then add the following attribute inside <telerik:radeditor ID="Editor" runat="server"

ExternalDialogsPath="~/sitecore/shell/controls/rich text editor/Dialogs/"

Provided from Harsh Baid’s article: https://www.harshbaid.in/2019/07/17/sitecore-sxa-open-in-overlay-checkbox-missing/

Files used by Overlay feature

The Overlay feature uses the following files:

• xa.js
• xaquery.js
• mediaelement-and-player.js ( it’s used by component-overlay.js to check for media players inside the overlay)
• component-overlay.js