Free computer code on screen

How can modal pop up be shown in LWC

In AURA components, lightning:overlayLibrary allows displaying messages in modals and popovers. However, this functionality isn’t available in LWC.

This tutorial will guide us through creating a modal/popup in LWC. Modals serve to showcase content above the application, often utilized for actions like creating/editing records or displaying messages.

For additional information, please visit:

The modal consists of three primary sections:

  • Section
  • Header
  • Footer

Let’s develop a component to explore modal/popup functionality 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 include it on the record page to observe the outcome.