--- title: "Modal" description: "The Modal Component is an Overlay like Page Disclaimer. It covers the Content Area of the Page behind, if it is configured for a specific Page." path: https://www.eonshowroom.eon.com/en/content-elements/modal.html lastModified: 2026-09-22T09:36:12.750Z --- # Modal # Modal #### Hidden Content Popup Overlay (Modal) [Modal ID: openonpageload] Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. [Decline (Redirect)](https://www.eonshowroom.eon.com/en/content-elements.html) ![Screenshot of Modal Type Two Buttons (Close & Redirect)](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/Screenshot-Modal%3A2-1?fmt=webp-alpha) [How to Configure](#how-to) ### Description The Modal Component is an Overlay like Page Disclaimer. - Add Confirmation Overlay on a Page - Experience Fragment Content that can be easily edited centrally [Check it out on Storybook](https://storybook.web-ui.eon.com/eon/master/?path=/story/content-clickable-image--interactive) ### Inspirations #### Hidden Content Popup Overlay (Modal) [Modal ID: twobuttons] Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. [Decline (Redirect)](https://www.eonshowroom.eon.com/en/content-elements.html) #### Hidden Content Popup Overlay (Modal) [Modal ID: onebuttonclose] Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. #### Hidden Content Popup Overlay (Modal) [Modal ID: onebuttonlink] Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. [Decline (Redirect)](https://www.eonshowroom.eon.com/en/content-elements.html) #### Hidden Content Popup Overlay (Modal) [Modal ID: nobutton] Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. Open Modal with two Buttons Open Modal with close Button only Open Modal with Linking Button only Open Modal without any Button ### Usage Rules & Features ##### Features - Content is created via Experience Fragment - Can be opened on Page Load or via Click on Link / Button - It is layout-neutral and adds no extra Whitespace. The recommended lacing all Modals at the bottom of your Page Tree for better Organization. ##### Properties - 4 different Types of Modal: Two Buttons (Close & Redirect), One Button (close Modal), One Button (Link), or No Button Layout ##### Design - If used in Full Width, Content behind gets blurred - As Content Grid in Experience Fragment 12 Column Grid is recommended ##### In which Grid Columns does it fit? | Grid Columns | Does it fit? | | --- | --- | | 2 | yes | | 3 | yes | | 4 | yes | | 5 | yes | | 6 | yes | | 8 | yes | | 9 | yes | | 10 | yes | | 12 | yes | The Modal Component only needs to placed somewhere in a Grid. As an Overlay it opens in Front of a Page not inside the Grid. ##### DO's - For Confirmations use Modal in full Width opening on Page Load - For additional Information open it via Click on Link / Button ##### DONT's - Do not use more than one Modal opening on Page Load - As Content Grid in Experience Fragment do not use smaller Grid Columns than 6 Columns - Avoid adding extra Margins or Paddings within the Experience Fragment, as the Modal framework provides its own Standard Spacing. ## Configuration ## Trackable Component This Component can be tracked. [Read more about Tracking](https://www.eonshowroom.eon.com/en/aem-basics/tracking.html) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Pattern_7-1%3A2-1?fmt=webp-alpha) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/modal_variant%3A1-1?fmt=webp) ### Configure a Variant At first, Editor needs to choose between different Types of Modal: - Two Buttons (Close & Redirect) - One Button (close Modal) - One Button (Link) - No Button Layout Beside this, Editor needs to set an ID for the Modal. Moreover, Editor can configure Modal to open on every Page Load. If this is not checked Modal needs to be opened via [Link](/content/foundationNG/en/content-elements/link.html) or [Button](/content/foundationNG/en/content-elements/button.html). Modal can also be a Full Width Modal Window. If it is a Full Width Modal Window, the Page in Background will get blurred. Beside that, Editor can set CSS-Z-Index to more than 3000, if Modal Close Icon is not visible. Optionally the Modal can be closed by use of the Modal's link or button. ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/modal_content%3A3-4?fmt=webp) ### Add Content of Modal In Content Tab, Editor can configure a Headline Text and a Headline Size (H1 - H5), as well as an HTML tag for SEO (H1 - H5), and a Headline Color can be selected. Furthermore, Editor needs to select an Experience Fragment, which contains Content of the Modal. This Content can be easily maintained by clicking on the Button "Edit Experience Fragment". ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/modal_interaction%3A1-1?fmt=webp) ### Do the Settings Button Elements can be configured in Interaction Tab. The Dialog Options for Button Elements depend on the selected Modal Type: | Modal Type | Options | | --- | --- | | Two Buttons (Close & Redirect) | Redirect Button Text Redirect Button URL Open in new Window Close Modal Text | | One Button (close Modal) | Close Modal Text | | One Button (Link) | Redirect Button Text Redirect Button URL Open in new Window | | No Button Layout | Interaction Tab is not available | ### Create Experience Fragment At first, Editor needs to create an Experience Fragment in Experience Fragments Part. [Find out more about Experience Fragment Handling](https://www.eonshowroom.eon.com/en/aem-basics/experience-fragment-handling.html) ![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/modal_exp-frag%3A2-1?fmt=webp) ### Add Content in Experience Fragment Inside the Experience Fragment for Modal, Editor should add a Grid (12 Column Grid is recommanded). Inside this Grid, Editor should only use Headline, Text, and / or Image.