Create a Modal/Popup in LWC Component

A Modal is a popup or a dialog box that opens on a Page. It is widely used in web development across different technologies. In today’s article, we will go through the code snippet on how to create a Modal/Popup in LWC Component.

We will start by writing the HTML part of the Modal and then move over to the JS part of it. We will be using SLDS (Salesforce Lightning Design System) classes to create the modal, you can find the reference here.

Basic Idea of Building a Modal

The basic principle of building a Modal/Popup window in LWC is to create a layer on top of the existing layer of your HTML element.

Normal two <template> tags appear one after the other in a DOM placement, by using SLDS stylings we make a <template> section appear on top of another and use if:true to hide and show it.

HTML Code

<template>
    <lightning-button variant="brand" label="Open Modal" title="Open Modal" onclick={showModal} class="slds-m-left_x-small"></lightning-button>

<template if:true={isOpen}>
     
     <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
         <div class="slds-modal__container">
            
            <!--Header part of the Modal-->
             <header class="slds-modal__header">
                 <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={hideModal}>
                     <lightning-icon icon-name="utility:close"
                         alternative-text="close"
                         variant="inverse"
                         size="small" ></lightning-icon>
                     <span class="slds-assistive-text">Close</span>
                 </button>
                 <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Modal Header</h2>
             </header>
             <!--Header part of the Modal Ends-->

             <!--Body part of the Modal-->
             <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                This is the Modal Body.
                You can use this section to show :
                <ul>
                    <li>Input form to capture some details</li>
                    <li>Show custom messages</li>
                </ul>

             </div>
             <!--Body part of the Modal ends-->
     
             <!--Footer part of the Modal-->
             <footer class="slds-modal__footer">
                 <button class="slds-button slds-button_neutral" onclick={hideModal} title="Cancel">Cancel</button>
                 <button class="slds-button slds-button_brand" onclick={save} title="OK">OK</button>
             </footer>
             <!--Footer part of the Modal-->
         </div>
     </section>

     <!-- This is the dark background that you can see behind the popup-->
     <div class="slds-backdrop slds-backdrop_open">

     </div>
 </template>
</template>

Explanation

In the above HTML code, we create a keep the modal inside our <template> tag. Then using a
@track variable in our JS we can hide and show it using if:true={isOpen}

An <section> element is created giving it the role of a dialog (<section role=”dialog” ..)

Then we start by creating an <div> element inside the <section> with class=”slds-modal__container”. This SLDS class marks this div as the container of the Modal.

We then create 3 child elements inside the parent div (“slds-modal__container”)

1. The Header of the Modal: We create a header tag with class class=”slds-modal__header” to make it the Modal header. The header can contain the Title of the Modal and Close button, to close it.
2. The Content of the Modal: The main content/ body of the Modal is built inside a <div> tag with class=”slds-modal__content slds-p-around_medium”. This can the place to render a UI input form or read a disclaimer etc.
3. The Footer of the Modal: The footer of the Modal is created with footer tag with class=”slds-modal__footer”. The footer can have buttons to save details of input forms inside the Modal body or a Cancel button to hide the modal.

With these sections in place, you can design the Modal as per your functionality and creativity.

Note: The modal is hidden and rendered with a track variable isOpen, which is used in the <template> tags which contains the complete code of Modal. Setting isOpen true/false hides and shows the Modal screen.

JS Code

import { LightningElement,track } from 'lwc';

export default class ModalWindow extends LightningElement {
    //With this flag we can hide and show the Modal in html file
    @track isOpen = false;

    showModal() {
       this.isOpen = true;
    }

    hideModal() {
        this.isOpen = false;
    }
    
    save() {
        this.isOpen = false;
    }
}

Explanation

The JS file doesn’t have much code, it only toggles the value of isOpen variable to true or false based on the buttons clicked in the HTML.

Demo

By just writing this simple HTML & JS code, powered by SLDS style classes, we are able to implement a Modal in our LWC Component.

Pro Tip to Create a Modal/Popup in LWC Component

If your project requires you to build multiple modal windows for different requirements. It will be best to create a separate LWC component for Modal with your client-specific styling and feature. The use new LWC component can be used as a child component in other parent LWC components.

You just need to pass details like header text, the content of the body, and callback function(when modal is closed or open).