Saturday, August 20, 2022

How to display modal/popup in LWC?

 In AURA component using lightning:overlayLibrary messages can be displayed in modals and popovers however lightning:overlayLibrary is not available in LWC.

In this post we will create a modal/popup in LWC.

Modals are used to display content in a layer above the app in cases such as creating/editing a record, as well as to display messages.

For more details please refer:

Modal has following three main parts.

  • section
  • header
  • footer

Let's create a component to understand modal/popup with an example,



    <lightning-button variant="success" label="Display Modal"

                        title="Display Modal" onclick={displayModalBox}>



   <!-- Modal/Popup start here-->     

   <template if:true={isShowModal}>


    <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">


        <!-- Modal/Popup header-->

          <header class="slds-modal__header">

             <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={hideModalBox}>

                <lightning-icon icon-name="utility:close"



                   size="small" ></lightning-icon>

                <span class="slds-assistive-text">Close</span>


             <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">This is modal/popup header</h2>



          <!-- Modal/Popup body -->


          <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">

                <p>This is modal/popup body</p>



          <!-- Modal/Popup footer-->

          <footer class="slds-modal__footer">

             <button class="slds-button slds-button_neutral" onclick={hideModalBox}>Cancel</button>





    <div class="slds-backdrop slds-backdrop_open"></div>


 <!-- Modal/Popup end here -->




import { LightningElement,track } from 'lwc';


export default class ModalDemoInLWC extends LightningElement {

    @track isShowModal = false;


    displayModalBox() { 

        this.isShowModal = true;



    hideModalBox() { 

        this.isShowModal = false;




<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="">









Now, let's add it to record page to see the result.

How to display modal/popup in LWC?
How to display modal/popup in LWC?

No comments:

Post a Comment