Lightning Modal/Popup Lightning Web Component(LWC)

Hello Guys, In this post I'll create lightning Modal/Popup in Lightning Web component Salesforce(LWC).

Modals 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.

Check below example

lightningModalLWC.html

<template>
    <!--Lightning Button which will open Modal on the click of it -->
    <lightning-button variant="brand" label="Open Modal" onclick={openModal}></lightning-button>

    <!--isModalOpen property will be used to hide/show for modal -->
    <template if:true={isModalOpen}>
        <!-- lightning modal Starts here -->
        <section role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="modal-heading-01" class="slds-modal slds-fade-in-open">
            <div class="slds-modal__container">
                <lightning-button-icon icon-name="utility:close"
                                              onclick={closeModal}                                              
                                              variant="bare-inverse"
                                              class="slds-modal__close">
                </lightning-button-icon>
                <div class="slds-modal__header">
                    <h1 id="modal-heading-01" class="slds-modal__title slds-hyphenate">Modal/Popup header LWC</h1>
                </div>
                <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                    <p>Modal Content would come here</p>
                </div>
                <div class="slds-modal__footer">
                    <button class="slds-button slds-button_neutral" aria-label="Cancel and close" onclick={closeModal}>Cancel</button>
                    <button class="slds-button slds-button_brand" onclick={submit}>Submit</button>
                </div>
            </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open" role="presentation"></div>
        <!-- lightning modal Ends here -->
    </template>
</template>

lightningModalLWC.js

import { LightningElement } from 'lwc';

export default class LightningModalLWC extends LightningElement {
    isModalOpen = false;//property that will be use to hide/show of Lightning Modal

    openModal(){
        this.isModalOpen = true;
    }
    closeModal(){
        this.isModalOpen = false;
    }
    submit(){
        //write some logic
        this.isModalOpen = false;
    }
}

lightningModalLWC.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>54.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__HomePage</target>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

output

Related Post : Lightning Modal/Popup Lightning Aura Component Salesforce