Skip to main content

Modal Overlay

The Modal Overlay component allows the author to create a pop-up within the page to display content.

How it Works

The author drops the Modal Overlap component onto the page and then selects the title and button which should appear. When a user clicks on the button, the pop-up will appear with the information/destination the author has chosen.

How to Use

Modal Title

In this field, the author can input the title which should appear above the button on the page.

Destination URL

In this field, the author can input the destination the author would like users to be directed to.

Important to Note:

  • If the author would like to redirect the user to a particular page, then the page URL (or internal path to that page) should be selected.
  • If the author would like for the user to see content within the pop-up then an experience fragment will need to be chosen from within AEM.
    • In the example below, an experience fragment has been chosen.
Button Label
In this field, the author can input the label which should appear in the button within the modal component.
Style Variations

While editing the component, the author may choose from several variations of the Modal component. The author may choose the background and button styles by selecting from the options under the paintbrush icon.
Last Modified on Nov 10, 2020
Back to Top