In today’s post we’ll see how to display popup modal using Lightning web components(lwc).

Popup Modals are used to display content in a layer over the current screen, ideally used to show record details, record edits, message with ok and cancel button,wizards etc.

Two classes are used in showing and hiding the modal. ” slds-fade-in-open”, will show the modal and ” slds-backdrop_open”, will make the backdrop greyed out. Also, i’m using a boolean variable “visible” to show or hide the modal section.

Below HTML will show the template file for the modal lwc component.

<!--
    Developer : Bennie Joseph
    Date : 28th Dec '19
-->
<template>
    <lightning-button variant="brand" label="Open Sesame" title="Modal Example" onclick = {ModalOpenFunc}> </lightning-button>
    
    <template if:true={visible}>
        <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 class="slds-modal__header">
                    <!--Close Button for the Modal-->
                    <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={Modalclosefunc}>
                        <lightning-icon icon-name="utility:close" alternative-text="close" variant="inverse" size="small"></lightning-icon>
                        <span class="slds-assistive-text">Close</span>
                    </button>
                    <h2 class="slds-text-heading_medium"> Modal/Popup </h2>
                </header>
                <!--Modal Message/Content body Block-->
                <div class="slds-modal__content slds-p-around_medium">
                        <h1><p>Salesforce Lightning Web Components #2 : Creating Popup/Modal Window Post</p></h1>
                </div>
                <footer class="slds-modal__footer">
                    <!-- Footer Action Button -->
                    <button class="slds-button slds-button__brand" onclick={Modalclosefunc}> Close Modal </button>
                </footer>
            </div>
        </section>
    <div class="slds-backdrop slds-backdrop_open"></div>
    </template>
</template>

Below modal.js code will set the visible variable to true on click of the button, which will show the modal and set it to false when clicked on close icon or button.

import { LightningElement, track } from 'lwc';

export default class Modal extends LightningElement {
    @track visible = false; 
    /* @track : 
    Marks a property for internal monitoring. A template or function using
    this property forces a component to rerender when the property’s value changes.
    Use this to store values locally, especially as a user interacts with your
    component.
    */
   ModalOpenFunc(){
       //setting visible to true on button click for modal to be visible
       this.visible = true;
   }

   Modalclosefunc(){
       //setting visible to flase to hide/close modal
       this.visible = false;
   }
}

Below is the xml file where the tags are mentioned to pull the component in lightning page or component.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="modal">
    <apiVersion>46.0</apiVersion>
    <isExposed>true</isExposed>
    <!-- target tag is added to make this web component visible in app page, record page and home page as per your requirement  -->
    <targets> 
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
     </targets>
</LightningComponentBundle>

Demo:

Modal component,button
Modal opened up onclick of the button

for any other salesforce related post click here.

To add-on or point out correction on my post or any suggestion of topics, Please fell free to add comments in the comments section.

LEAVE A REPLY

Please enter your comment!
Please enter your name here