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

Add comment