Create Modal Popup Box in LWC Salesforce

Hello Great Readers!

Previously, I have told you Use of Conditional Rendering in Lightning Web Component. Have you ever think what is Modal Popup? So, let me tell you its a child window with that user interacts before they returning to the parent application. And this window often have a different appearances than normal windows.

Now, let’s come to the point, I know you may have been ever came across to this use case to create the modal popup in LWC. So, here I am today to share with you the code snippet for your help. Creating the modal popup is so easy in LWC and it’s just few minutes of tasks.

Modal Popup creates with the various methods will discuss only one of the way here.

Create the Custom Component using VS code.

Step 1: Create the Lightning Web Component

    <!-- Modal will open on click of this modal -->
    <lightning-button name="showModal" label="Show Modal" onclick={showModal} variant="brand" class="slds-m-around_small"></lightning-button>

    <!-- This Modal will only be visible if showModal is set to true -->
    <template if:true={openModal}>
        <section aria-modal="true" class="slds-modal slds-fade-in-open">
            <div class="slds-modal__container ">
                <header class="slds-modal__header">
                    <h2 class="slds-text-heading_small">Modal Header</h2>
                    <lightning-icon class="slds-modal__close" icon-name="utility:close" size="small" onclick={closeModal}></lightning-icon>
                <div class="slds-modal__content">
                    <div class="slds-p-around_small">
                        <p></p><br />
			 <p>Hello! Readers</p>
                <footer class="slds-modal__footer">
                    <lightning-button variant="brand" label="Cancel" onclick={closeModal} class="slds-p-around_x-small"></lightning-button>
        <div class="slds-backdrop slds-backdrop_open"></div>

In javascript, you only need to add or change in the value of the property.

import { LightningElement, track } from 'lwc';

export default class CustomModal extends LightningElement {

    @track showModal = false;

    openModal() {
        // Setting boolean variable to true, this will show the Modal
        this.showModal = true;

    closeModal() {
        // Setting boolean variable to false, this will hide the Modal
        this.showModal = false;

Let us know in the comment section if this component helps you out. !!

If you want to add anything in this component further Chat with us, We will be more than happy to assist you.

And thank you for being an awesome readers!

Popular Post:

Parul Singh

I’m a Salesforce Certified Service Cloud Consultant, Certified Administrator & Certified Platform Developer. I have 2 years of experience, currently working on Field Service Lightning, Lightning Flows and Learning Lightning Web Component. I was featured in the top Salesforce Bloggers of 2018 by

You may also like...