Model Popup In LWC

Today In this post we will going to learn about how to create modal/Popup in Lightning web Component.

What is Model/Popup In Lightning Web Component (LWC).

Modals/Popup Box are used to display content in a layer above the app. This paradigm is used in cases such as the creation or editing of a record, as well as various types of messaging and wizards

Step 1:- Create a Lighting web component in your org.

Component.html

<template>
    <lightning-card  title="Model Pop Up">
        <lightning-button label="New" slot="actions"></lightning-button>
        <lightning-button variant="brand" label="Open Model"  onclick={handleClickOpen} class="slds-m-left_x-small"></lightning-button>

    </lightning-card>

    <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 header start -->
      <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">Welcome in Sfdc Pathshala</h2>
      </header>

      <!-- modal body start -->
      <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
            <p>Modal/Popup in Lightning Web Component (LWC)</p>
      </div>

      <!-- modal footer start-->
      <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 end -->
</template>

Component.js

import { LightningElement ,track} from 'lwc';

export default class ModelPopUpTOCreateAccount extends LightningElement {
    @track isShowModal = false;

    handleClickOpen() {
        this.isShowModal = true;
    }

    hideModalBox() {
        this.isShowModal = false;
    }
}

Component.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>
        <target>lightning__Tab</target>
    </targets>
</LightningComponentBundle>

You can customize above model/popup according to your requirement.

Component.html

Component.js

Component.js-meta.xml

Output : –

By Admin