Create Popup/Modal in Lightning Web Components

Popup/Modal is very useful component. It can be used to display notification, important Mesage to users. Today we will create a Popup/Modal in Lightning Web Components (LWC) which will support all UI experience.
We can also set message and heading dynamically so you just need to include this component as child and you can call it from parent Aura or LWC component.
Now we will review the code.

You can start learning and development on Open Source Lightning Web Components here.

lwcModal.html

<template>
    <template if:true={showModal}>
    <section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-modal_medium" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1">
        <div class="slds-modal__container">
          <header class="slds-modal__header">
            <!-- if:true={showModel}-->
            <lightning-button-icon icon-name="utility:close" class="slds-float_right" onclick={closeModal} alternative-text="close"></lightning-button-icon>
            <h2 id="modal-heading-01" class="slds-modal__title slds-hyphenate">{modalHeading}</h2>
          </header>
          <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
            <p>{message}</p>
          </div>
          <footer class="slds-modal__footer">
            <lightning-button variant="neutral" label="Close" title="Close" onclick={closeModal}
                class="slds-m-left_x-small"></lightning-button>
          </footer>
        </div>
      </section>
      <div class="slds-backdrop slds-backdrop_open"></div>
    </template>
</template>

lwcModal.js

import { LightningElement, api } from 'lwc';

export default class LwcModal extends LightningElement {

    @api showModal = false;
    @api message;
    @api modalHeading;

    @api
    openModal() {
        this.showModal = true;
    }

    @api
    closeModal() {
        this.showModal = false;
    }
}

We have used @api decorators to make this property public and call this method from parent component.
To use this component we first need to include this component in our parent component.

<aura:application extends="force:slds">

    <aura:attribute name="message" type="String" description="Modal Message" ></aura:attribute>
    <aura:attribute name="modalHeading" type="String" description="Modal Heading" ></aura:attribute>
    <c:lwcModal aura:id="modal" message="{!v.message}" modalHeading="{!v.modalHeading}"></c:lwcModal>
    
    <lightning:button variant="brand" label="Show Modal" title="Show Modal" onclick="{! c.showModal }" />
</aura:application>

Here we have included lwcModal and give him aura:id="modal". It will help us in calling the method.
Then in controller we need to call child component method.

showModal : function(component, event, helper) {
        component.set("v.message", "Message from Lightning App");
        component.set("v.modalHeading", "Custom Heading");
        
        component.find('modal').openModal();
        //To call this from LWC
        //this.template.querySelector('c-lwc-modal').play();
    }

In case if you want to call this from LWC component then uncomment the code. This is how our final output will look like:

So now our Modal is ready to be used anywhere and We have quickly created Popup/Modal in Lightning Web Components.
Did you like the post or do you have any question, Let me know in comments. Happy Programming 🙂