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: https://www.lightningdesignsystem.com/components/modals/

Modal has following three main parts.

• section
• header
• footer

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

modalPopupLWC.html

<template>

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

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

    </lightning-button>

 

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

                   alternative-text="close"

                   variant="inverse"

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

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

             </button>

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

          </header>

     

          <!-- Modal/Popup body -->

 

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

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

          </div>

 

          <!-- Modal/Popup footer-->

          <footer class="slds-modal__footer">

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

          </footer>

      

       </div>

    </section>

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

 </template>

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

 

</template>

modalPopupLWC.js

import { LightningElement,track } from 'lwc';

 

export default class ModalDemoInLWC extends LightningElement {

    @track isShowModal = false;

 

    displayModalBox() { 

        this.isShowModal = true;

    }

 

    hideModalBox() { 

        this.isShowModal = false;

    }

}

modalPopupLWC.js-meta.xml

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

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>55.0</apiVersion>

    <isExposed>true</isExposed>

      <targets>

        <target>lightning__AppPage</target>

        <target>lightning__RecordPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>

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