SLDS Lightning Web Component Modal

Are you looking to have a generic custom SLDS Lightning Web Component modal where you can easily change the modal size, headers, body and footer with minimal javascript required? This blog is for you. Let’s create a Lightning Web Component named modal with these files:-

The html file of the modal component is having raw slds modal code with a public attribute named modalClass which you can pass while calling to control the things like size of the modal.It also has the named slots which enables you to pass any html element in header, body and footer.

<template>
    <section role="dialog" tabindex="-1" class={modalClass} aria-labelledby="modal-heading-01" aria-modal="true">
        <div class="slds-modal__container">
            <div class="slds-modal__header">
                <slot name="headercontent">Default content</slot>
            </div>
            <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                <slot name="bodycontent">Default content</slot>
            </div>
            <div class="slds-modal__footer">
                <slot name="footercontent">Default content</slot>
            </div>
        </div>
    </section>
    <div class="slds-backdrop slds-backdrop_open" role="presentation"></div>
</template>

The js file has a public property named modalClass whose possible values are:-
slds-modal slds-fade-in-open slds-modal_large
slds-modal slds-fade-in-open slds-modal_medium
slds-modal slds-fade-in-open slds-modal_small

import { LightningElement, api } from 'lwc';

export default class Modal extends LightningElement {
    //default size of the modal has been kept as large 
    //other possible values are medium and small
    @api modalClass = "slds-modal slds-fade-in-open slds-modal_large";
}

The xml file has isExposed tag as false as we will not be using directly on the lightning pages.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>54.0</apiVersion>
    <isExposed>false</isExposed>
</LightningComponentBundle>

The next step is deploy modal component to your org. We will use this modal in other lightning web component. To test this out, Let’s create another Lightning Web Component named displayModal where we will call our generic modal component.

displayModal.html

We have called the modal component and passed the html content through the named slots. This makes our modal component really powerful. Open modal button in this component has onclick handler which controls the visibility of modal. When you click on it, it opens the modal.

<template>
    <lightning-button label="open modal" onclick={handleOpenModal}></lightning-button>
    <c-modal if:true={openModal} modal-class="slds-modal slds-fade-in-open slds-modal_medium">
        <span slot="headercontent">
            <lightning-button-icon class="slds-modal__close" title="Close" icon-name="utility:close"
                icon-class="slds-button_icon-inverse" onclick={handleCloseModal}>
            </lightning-button-icon>
            This is a generic Modal
        </span>
        <span slot="bodycontent">
            Insert any component or HTML content here
        </span>
        <span slot="footercontent">
            <button class="slds-button slds-button_neutral" onclick={handleCloseModal} title="Cancel">Cancel</button>
        </span>
    </c-modal>
</template>

displayModal.js

import { LightningElement } from 'lwc';

export default class DisplayModal extends LightningElement {
    openModal = false;
    handleOpenModal() {
        this.openModal = true;
    }
    handleCloseModal() {
        this.openModal = false;
    }
}

displayModal.js-meta.xml

displayModal component has been exposed to various lightning pages. You can place it on any of the page and test out the functionality.

<?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__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>