How to Create a Responsive Popup Modal in AEM

INTRODUCTION

A pop-up modal is a descendant window of the primary window of a web application which is also called a dialog. Dialogs can be either modal (content within the dialogue can be interacted) or non-modal (content outside of the dialogue can still be handled).

Dialogs are placed on top of the rest of the page content using an overlay. When a dialogue element is marked up, assistive technology can recognise that its information is grouped and distinct from the rest of the page.

The native <dialog> element, which has accessibility and usability features, can be used to create pop-up modals. The <dialog> element is exposed by browsers in a manner like custom dialogs that use the ARIA role=”dialog” attribute. <dialog> elements invoked by the showModal() method implicitly have aria-modal=”true”. The Esc key can be used to dismiss a dialogue that the showModal() method invokes by default. By default, a non-modal dialogue does not dismiss using the Esc key, and this behaviour may not be desirable depending on what the non-modal dialogue represents.

In this article we will explore the popup modal creation within an AEM Application.

TECHNICAL DETAILS

Back-end:

• Add a dialogue field that will allow an author to specify the required data.

• Create a sling model to read in the authored data from our component.

• Transition to HTL/ Sightly

Front-end:

HTML 5 is the skeleton of any modern website. As an AEM Developer, you should not only be able to semantically divide pages into sections and style them but leave this apprenticeship making new AEM components with a name-spacing technique called Block, Element, Modifier (BEM).

BEM is a declarative syntax for naming classes of both HTML and CSS. This technique helps avoid CSS inheritance by assigning a unique class name per component and thus helping to reduce styling conflicts.

Let’s get started by creating the required HTML markup. All the content within the <dialog> is optional and included for the purposes of this tutorial, you could replace it with whatever content you like in AEM when using this on a real website.

HTML:

<div class="cmp-modal-popup" data-sly-use.popupModal="com.demo.core.models.ModalPopup">
    <button id="showDialogBtn">${popupModal.popupButtonLabel}</button>
    <dialog id="newDialog">
        <form method="dialog">
            <div class="cmp-modal-content">
                <div class="cmp-modal-header">
                    <h3 class="cmp-modal-header--title">${popupModal.title}</h3>
                    <button class="cmp-modal-close" aria-label="Close">&times;</button>
                </div>
                <p>${popupModal.description}</p>
                <video controls
                    src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
                    poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217" width="620">
                    ${popupModal.videoErrorMessage}</video>
            </div>
        </form>
    </dialog>
</div>

The <dialog> element makes it easy to create popup dialogs and modals on a web page. It represents a modal or non-modal dialog box or another interactive component, such as a dismissable alert, inspector, or sub window.

HTML <form> elements can be used to close a dialog box if they have the attribute method=”dialog” or if the button is used to submit the form.

When implementing this on a live website, you can change any of the optional items that are included in the <dialog> with any content that you would like, and all modifiable content and asset links would be entered by an author and supplied to the HTL from the sling model. Additionally, a button (id=”showDialogBtn”) is there to initiate the model’s popup and display.

CSS:

 body {
   font-family: sans-serif;
 }
 button {
   font-size: 1rem;
   padding: 5px 15px;
 }
 dialog::backdrop {
   background-color: salmon;
 }
 .cmp-modal-content {
   background-color: white;
   border-radius: 0.5em;
   max-width: 900px;
   padding: 2em;
   margin: auto;
 }
 .cmp-modal-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   border-bottom: 2px solid black;
 }
 video {
   width: 100%;
 }

The ::backdrop CSS pseudo-element is a box the size of the viewport, which is rendered immediately beneath any element being presented in the top layer. This pseudo-element could be used to blur, darken, or otherwise obfuscate the inert content behind the modal dialog.

The modal-content class is a modal content container. The max-width property ensures maximum width of responsive modal, no matter how wide the device is. The classic auto value for margins brings the responsive modal to the exact center.

JavaScript:

const showDialogBtn = document.getElementById('showDialogBtn');
const newDialog = document.getElementById('newDialog');
showDialogBtn.addEventListener('click', () => newDialog.showModal());

The JavaScript functionality will begin with an event listener for user clicks on the open button. The .showModal() method opens the modal dialog when the “Show a dialog” button is activated.

SUMMARY & BEST PRACTICES

A user interface element that shows up in the website’s forefront is called a popup modal. Usually activated by the user, they let them access more information or finish an action without requiring them to visit another URL. We built a responsive popup modal with JavaScript functionality and CSS styling in this blog which can be utilised in AEM.

• BEM naming convention
• Block__Element — modifier == cmp-modal-popup__paragraph — text-blue
• Avoid inline CSS or JavaScript
• Keep sections in logical order with header, content, and footer.

Technical Summary:

• DOM interface: HTMLDialogElement
• As with all HTML elements, it is not conforming to use the dialog element when attempting to represent another type of control. For example, context menus, tooltips, and popup list boxes are not dialog boxes, so abusing the dialog element to implement these patterns is incorrect.
• dialog.showModal()
  - Displays the dialog element and makes it the top-most modal dialog.
  - This method honors the autofocus attribute.

Specification: HTML Standard # the-dialog-element