Using Lightning Design System(SLDS) Modal/Popup in Salesforce Lightning Web Components

Hello there & Welcome back! 😀

In this post we will be learning how to use Lightning Design System(SLDS) Modal/Popup in Salesforce Lightning Web Components.

First, let us understand what CSS classes help us show or hide the SLDS Modal. According to the SLDS Modal Component Blueprint:

CSS Class
What does it do?
slds-fade-in-open
Allows the modal(white popup) to be visible
slds-backdrop_open
Allows the backdrop(grey overlay) to be visible

Hence, adding/removing these classes to the appropriate elements help us show/hide the Modal with some beautiful transition.

Let’s start building!

Component Markup HTML
lwcSldsModal.html
<template>
   <lightning-button variant="brand" label="Show Modal" title="Show Modal" onclick={showModal}
      class="slds-m-left_x-small"></lightning-button>

   <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true"
      aria-describedby="modal-content-id-1" class={modalClass}>
      <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={closeModal}>
               <lightning-icon icon-name="utility:close" alternative-text="Close Modal" variant="inverse" size="small">
               </lightning-icon>
            </button>
            <h2 id="modal-heading-01" class="slds-text-heading_medium slds-modal__title slds-hyphenate">
               Modal Header
            </h2>
         </header>
         <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
            <p>
               Modal Content Here...
            </p>
         </div>
         <footer class="slds-modal__footer">
            <lightning-button variant="neutral" label="Close" title="Close" onclick={closeModal}>
            </lightning-button>
            <lightning-button variant="brand" class="slds-m-left_x-small" label="Save" title="Save"
               onclick={closeModal}>
            </lightning-button>
         </footer>
      </div>
   </section>
   <div class={modalBackdropClass}></div>
</template>
Notice that I have replaced the class attribute on Line 6 & Line 32 with 2 Getter Properties – modalClass & modalBackdropClass respectively. Let’s see why, in the JavaScript.
Component JavaScript
lwcSldsModal.js
import { LightningElement, track } from "lwc";

export default class LwcSldsModal extends LightningElement {
  //track whether the modal is open(true) or closed(false), closed by default
  @track isModalOpen = false;

  //sets the isModalOpen property to true, indicating that the Modal is Open
  showModal() {
    this.isModalOpen = true;
  }

  //sets the isModalOpen property to false, indicating that the Modal is Closed
  closeModal() {
    this.isModalOpen = false;
  }

  /* 
  can be used instead of the above two methods - showModal() & closeModal()
  just toggles the isModalOpen property - true if false, false if true 
  */
  toggleModal() {
    this.isModalOpen = !this.isModalOpen;
  }

  //compute the CSS classes of the Modal(popup) based on the value of isModalOpen property
  get modalClass() {
    return `slds-modal ${this.isModalOpen ? "slds-fade-in-open" : ""}`;
  }

  //compute the CSS classes of the Modal Backdrop(grey overlay) based on the value of isModalOpen property
  get modalBackdropClass() {
    return `slds-backdrop ${this.isModalOpen ? "slds-backdrop_open" : ""}`;
  }
}
JavaScript explanation:
  1. Line 5 – @track isModalOpen – boolean property is used to track if the modal is open or not, the modal is closed by default so, the property is defaulted to false.
  2. The showModal() method is called by the button that is used to open/show the modal and sets the isModalOpen to true.
  3. The closeModal() method is called by the button that is used to close/hide the modal and sets the isModalOpen to false.
  4. Optionally, instead of using two methods (showModal() and closeModal()) to open or close the modal
    we can just use the single toggleModal() method to toggle the modal (open if closed & close if opened)
  5. The two getters functions – modalClass and modalBackdropClass – compute and return the CSS classes of the modal and the backdrop depending on the value of isModalOpen property,
    1. If the isModalOpen = false,
      • get modalClass() returns 'slds-modal’
      • get modalBackdropClass() returns 'slds-backdrop'
    2. And if the isModalOpen = true,
      • get modalClass() returns 'slds-modal slds-fade-in-open’
      • get modalBackdropClass() returns 'slds-backdrop slds-backdrop_open'
  6. Line 27 & Line 32 are strings with template literals and ternary condition.
Component Configuration
Nothing fancy, just exposing the component to be available in Lightning App Builder for App Page, Record Page & Home Page.
lwcSldsModal.js-meta.xml
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="lwcSldsModal">
    <apiVersion>46.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

That’s it! We have our shiny new modal with beautiful transitions!

Some useful resources:
  1. Learn Lightning Web Components with Trailhead
  2. More on Getters in LWC
  3. Template literals (Template strings)
    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
Happy Coding!
For more Salesforce Dev Content, Please Like & Subscribe to My Facebook Page with the links below.
Thank you, See you in the next one & Peace 😄




Leave a Reply

Your email address will not be published.