Modal Popup with Overlay in LWC

Hello friends, today we are going to discuss Modal Popup with Overlay in LWC. Lightning Web Components (LWC) is a powerful framework that allows you to build custom, reusable components for the Salesforce platform. One of the most common use cases for LWC is creating modal popups.

A modal popup is a dialog box that appears on top of the current page, blocking the user from interacting with the underlying page until the dialog is closed. In this blog post, we will be discussing how to create a modal popup with overlay using LWC.

Also, check this: Set and Get Sobject fields dynamically in Apex

Key Highlights :

1. lightning-modal-body component renders the content of a modal. This is required for creating a modal popup.
2. lightning-modal-header component displays header text in a panel at the top of a modal dialog. The use of a header is optional.
3. lightning-modal-footer component creates a footer at the bottom of a modal dialog. The use of a footer is optional.
4. To create a modal component, import LightningModal from lightning/modal.
5. We invoke the modal up from other components and also pass and get parameters.

Code :

First we create base modal component so we can use in other component

lWCModal.Html :

<template>
	<lightning-modal-header label={content}></lightning-modal-header>
	<lightning-modal-body>
		<div class="slds-p-around_small">
			<lightning-input name="name" label="Name" value="">
			</lightning-input>
			<lightning-input type="email" name="email" label="Email" value="">
			</lightning-input>
			<lightning-input type="tel" name="mobile" label="Mobile" value="">
			</lightning-input>
		</div>
	</lightning-modal-body>
	<lightning-modal-footer>
		<div class="slds-m-top_small slds-align_absolute-center">
			<lightning-button variant="Neutral" label="Close" class="slds-m-left_x-small" onclick={handleClose}>
			</lightning-button>
			<lightning-button variant="brand" class="slds-m-left_x-small" label="Save" onclick={handleSave}>
			</lightning-button>
		</div>
	</lightning-modal-footer>
</template>

lWCModal.JS:

import { api } from 'lwc';
import LightningModal from 'lightning/modal';

export default class LWCModal extends LightningModal {
    @api content;

    handleClose() {
        this.close('close popup');
    }

    handleSave() {
        let data = {};
        this.template.querySelectorAll('lightning-input').forEach(currentItem => {
            data[currentItem.name] = currentItem.value;
        });

        console.log(data);
        this.close(data);
    }
}

Now we create our main component from which we invoke modal popup with overly

lWCModalEmbed.html :

<template>
	<div class="slds-tabs_card">
		<div class="slds-page-header">
			<div class="slds-page-header__row">
				<div class="slds-page-header__col-title">
					<div class="slds-media">
						<div class="slds-media__figure">
							<span class="slds-icon_container slds-icon-standard-opportunity">
								 <lightning-icon icon-name="standard:recipe" alternative-text="recipe" title="recipe"></lightning-icon>
                            </span>
						</div>
						<div class="slds-media__body">
							<div class="slds-page-header__name">
								<div class="slds-page-header__name-title">
									<h1>
										<span>Modal Popup with Overlay in LWC</span>
										<span class="slds-page-header__title slds-truncate" title="Recently Viewed">TechDicer</span>
									</h1>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="slds-page-header__col-actions">
					<div class="slds-page-header__controls">
						<div class="slds-page-header__control">
							<ul class="slds-button-group-list">
								<li>
									<lightning-button name="openModal" label="Open Modal" onclick={openModal}
										variant="brand" class="slds-m-around_small"></lightning-button>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

lWCModalEmbed.js:

import { LightningElement } from 'lwc';
import lWCModal from 'c/lWCModal';

export default class LWCModalEmbed extends LightningElement {
    async openModal() {
        const result = await lWCModal.open({
            size: 'small', //small, medium, or large default :medium
            description: 'Accessible description of modal\'s purpose',
            content: 'Open LWC form for get details',
        });
        console.log(result);
    }
}

lWCModalEmbed.js-meta.xml:

<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
	<apiVersion>55.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>
		<target>lightning__HomePage</target>
	</targets>
</LightningComponentBundle>

Output :

Reference :

1. LWC Modal