LWC Modal: How To Create/Show Modal Popup in LWC

How Display Content In Modal Popup window using Lightning Web Components (LWC):

If we need to show something in modal dialog we need to use predefined slds class "slds-modal" . LWC modal has three section i.e header, body(modal content), footer. If we use "slds-modal__header" class we can show sticky header in modal window and by using "slds-modal__footer" class we can show sticky footer where usually show save, cancel buttons. By using "slds-modal__content" class we can show modal body content.

In below example code we are showing lightning button, on click of that button, modal popup window will be opened.

Code for Lightning Web Component (LWC) Modal Popup 

Create new lightning web component: lwcModalPopup

lwcModalPopup.html

 <template>  
   <div class="slds-box slds-theme_shade">  
     <lightning-button label="Show Modal" onclick={showModal}> </lightning-button>  
   </div>  
   <template if:true={openModal}>  
     <div class="slds-modal slds-fade-in-open slds-backdrop">  
       <div class="slds-modal__container">  
         <!------HEADER Section-->  
         <div class="slds-modal__header">  
           <lightning-button-icon icon-name="utility:close" alternative-text="Close this window" size="large"  
             variant="bare-inverse" onclick={closeModal} class="slds-modal__close">  
           </lightning-button-icon>  
           <h2>Welcome To SalesforcePoint.com</h2>  
         </div>  
         <!------Body Section-->  
         <div class="slds-modal__content slds-p-around_medium">  
           <center>  
             <P>Hello guys, welcome to salesforcepoint.com. <br>  
               This is the basic lightning web component Modal popup.  
             </P>  
           </center>  
         </div>  
         <!------Footer Section-->  
         <div class="slds-modal__footer">  
           <lightning-button icon-name="utility:close" label="close" variant="brand" onclick={closeModal}>  
           </lightning-button>  
         </div>  
       </div>  
     </div>  
   </template>  
 </template>  

lwcModalPopup.js

import { LightningElement,track } from 'lwc';
export default class LwcModalPopup extends LightningElement {
    @track openModal = false;
    showModal() {
        this.openModal = true;
    }
    closeModal() {
        this.openModal = false;
    }
}

Deploy the modal component and add it lightning page.

Output:

Output of LWC Modal component

Subjects:

Lightning Web Components Lightning Web Components Basics LWC LWC Basics

Share This: