Create Modal Popup in Salesforce LWC

Recently, I created a system management app in Salesforce using Lightning Web Component. In that, I got a requirement to display parent Account details on the contact record page using a pop-up modal. With this, users don’t need to navigate to the Account record page and can see the information in the modal popup.

While looking for solutions, I came across two methods to create a modal popup in Salesforce Lightning Web Component:

Create a modal popup using custom SLDS-based modals
Create a modal popup using lightning-modal component

This Tutorial Covers:

What is Modal Popup in Salesforce Lightning Web Component?

The Modal pop-up is a dialog box that appears over the current page to display additional information or to get user input. It doesn’t redirect the user and is often used for forms, confirmations, or additional detail views.

There are two ways to create show modals and popups: through styling and making a custom HTML modal, or using the Winter ’23 Modal Component feature, a library called lightning-modal tag.

Let’s explore both methods for creating a modal popup in Salesforce Lightning Web Component. In this example, we will create a modal popup using LWC that displays the account information on the Contact record page.

Create a Modal Popup in LWC Using Custom SLDS

In this method, we will use the Lightning Record API to retrieve Account details from the Contact’s AccountId. Then, expose the component on the Contact record page using recordId.

Now, open the VS Code IDE integrated with Salesforce org, and follow the steps below.

Create a Lightning Web Component and label it as contactAccountModal. Then, enter the code below in the HTML file to define the UI of the pop-up modal.

<template>
    <lightning-card title="Contact Details" icon-name="standard:contact">
        <div class="slds-p-horizontal_medium">
            <lightning-button
                label="View Parent Account"
                onclick={handleOpenModal}
                variant="brand"
            ></lightning-button>
        </div>
    </lightning-card>

    <template if:true={isModalOpen}>
        <section
            role="dialog"
            tabindex="-1"
            aria-modal="true"
            class="slds-modal slds-fade-in-open">
            <div class="slds-modal__container">
                <header class="slds-modal__header">
                    <button
                        class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
                        title="Close"
                        onclick={handleCloseModal}>
                        <lightning-icon icon-name="utility:close" size="small"></lightning-icon>
                    </button>
                    <h2 class="slds-text-heading_medium">Parent Account Details</h2>
                </header>
                <div class="slds-modal__content slds-p-around_medium">
                    <template if:true={account}>
                        <p><strong>Name:</strong> {account.Name}</p>
                        <p><strong>Industry:</strong> {account.Industry}</p>
                        <p><strong>Phone:</strong> {account.Phone}</p>
                        <p><strong>Website:</strong> {account.Website}</p>
                    </template>
                    <template if:true={error}>
                        <p class="slds-text-color_error">{error}</p>
                    </template>
                </div>
                <footer class="slds-modal__footer">
                    <lightning-button
                        variant="neutral"
                        label="Close"
                        onclick={handleCloseModal}
                    ></lightning-button>
                </footer>
            </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open"></div>
    </template>
</template>

In the above code, we have added a button