Modal Popup with Overlay in LWC

by Rijwan Mohmmed
modal-popup-with-overlay-in-lwc-salesforce-techdicer

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 :

modal-popup-with-overlay-in-lwc-salesforce-output-techdicer
modal-popup-with-overlay-in-lwc-salesforce-output-techdicer

Reference :

  1. LWC Modal
What’s your Reaction?
+1
1
+1
2
+1
0
+1
0
+1
1
+1
0

You may also like

3 comments

Pranav April 26, 2023 - 6:34 pm

Your work is really appreciable for new learners… Its request to create a blog on How to call Screen Flow, Record Trigger Flow with onclick lightning button in LWC…

Reply
Rijwan Mohmmed April 27, 2023 - 12:48 pm

Sure I will create in next few days

Reply
Vishav September 9, 2023 - 5:32 pm

Excellent!!

Reply

Leave a Comment