2 Ways to Implement Salesforce Modal In Lightning Web Component

Modals are used to display a dialog box/popup above the app. This pattern is used in case such as the creation or editing of a record in salesforce, as well as various type of messaging and wizard.

Today in this post we are going build a custom salesforce modal with lightning web component programming model.

There are 2 ways to build salesforce model in LWC :

• By toggle SLDS style classes
• Using JavaScript properties in LWC

Approch 1 : [By toggle SLDS style classes]

HTML File :

<template>

  <!--button to open Model window-->
  <lightning-button label="Open Modal" onclick={openModal} variant="brand"></lightning-button>

  <!--Modal Box Start-->
    <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="modalSection slds-modal">
        <div class="slds-modal__container">
         <!--Modal Header Start-->
          <header class="slds-modal__header">
            <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">
              <lightning-icon variant="inverse" onclick={closeModal} alternative-text="close" icon-name="utility:close" size="small"></lightning-icon>
            </button>
            <h2 id="modal-heading-01" class="slds-modal__title slds-hyphenate">Modal header</h2>
            <p class="slds-m-top_x-small">Here’s a tagline if you need it. It is allowed to extend across mulitple lines, so I’m making up content to show that to you. It is allowed to</p>
          </header>
         <!--Modal Body Start-->
          <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
            Blessed great all life. Given living under signs And for face upon deep thing gathering great appear To signs, fifth gathering. Multiply one. Morning. Which i you you'll heaven female she'd image, it earth of given creature, doesn't yielding green.

            Good air. Brought be whose you'll female two of night bring them place set moved beast own image fish lights deep. Unto meat living form morning set first winged land.
            
            Light created Over was darkness his likeness tree form bring multiply for midst rule morning bearing gathering saying. Creature is upon. Saw green itself creeping Creature our won't that Fish.
          </div>
          <!--Modal Footer Start-->
          <footer class="slds-modal__footer">
            <lightning-button label="Cancel" onclick={closeModal}></lightning-button>
             &nbsp;
            <lightning-button variant="brand" label="Save" ></lightning-button>
          </footer>
        </div>
      </section>
      <div class="backdropDiv slds-backdrop"></div>
    <!--Modal Box end-->  
</template>

JavaScript File :

import { LightningElement } from 'lwc';

export default class CustomPopup extends LightningElement {
   
   // JS function to open modal window by adding CSS classes 
    openModal(){
      this.querySelectorHelper('.modalSection').classList.add('slds-fade-in-open');
      this.querySelectorHelper('.backdropDiv').classList.add('slds-backdrop_open');
    }

    // JS function to close modal window by removing CSS classes
    closeModal(){
      this.querySelectorHelper('.modalSection').classList.remove('slds-fade-in-open');
      this.querySelectorHelper('.backdropDiv').classList.remove('slds-backdrop_open');
    }

    // generic function to get return document element
    querySelectorHelper(element){
       return this.template.querySelector(element);
    }
}

js-meta.xml file

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

<!-- expose component on app page,record page and home page -->
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

<section role="dialog" tabindex="-1"
         aria-labelledby="modal-heading-01"
         aria-modal="true"
         aria-describedby="modal-content-id-1"
        class="slds-modal_large modalSection slds-modal slds-fade-in-open">

<template>
    <!--button to open Modal window-->
  <lightning-button label="Open Modal V1" onclick={openModal} variant="brand"></lightning-button>

  <!--Modal Box Start-->
   <template if:true={bShowModal}>
    <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="modalSection slds-modal slds-fade-in-open">
        <div class="slds-modal__container">
         <!--Modal Header Start-->
          <header class="slds-modal__header">
            <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">
              <lightning-icon variant="inverse" onclick={closeModal} alternative-text="close" icon-name="utility:close" size="small"></lightning-icon>
            </button>
            <h2 id="modal-heading-01" class="slds-modal__title slds-hyphenate">Custom Modal In Lwc</h2>
          </header>
         <!--Modal Body Start-->
          <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
            Set for so. Evening multiply whales dry seed give, that don't life deep him greater. Unto years moveth unto cattle seed fish open unto one multiply firmament blessed.
            Also lesser multiply moveth to let open. Have forth let so that so herb living light give they're fruitful gathered give herb shall above of our after let.
            Shall. Made form you're fish very Years itself for abundantly won't midst. Heaven. Creeping for night make were place his place third let female male, deep fruitful isn't fly. Yielding isn't female. Lesser, day over, dry third, fruit under which. Likeness and were which.
          </div>
          <!--Modal Footer Start-->
          <footer class="slds-modal__footer">
            <lightning-button label="Cancel" onclick={closeModal}></lightning-button>
             &nbsp;
            <lightning-button variant="brand" label="Save" ></lightning-button>
          </footer>
        </div>
      </section>
      <div class="backdropDiv slds-backdrop slds-backdrop_open"></div>
    </template>
    <!--Modal Box end-->
</template>

Js Code :

import { LightningElement } from 'lwc';

export default class CustomPopupv2 extends LightningElement {

    // private property
    bShowModal = false;

     // JS function to open modal window by setting property as true
     openModal(){
        this.bShowModal = true;
      }
  
      // JS function to close modal window by setting property as false 
      closeModal(){
        this.bShowModal = false;
      }

}

Check Code Comments …

meta xml

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

<!-- expose component on app page,record page and home page -->
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Resources :

• Modal Component Blueprint
• Render DOM Elements Conditionally

For further reading:

How To Use jQuery Data Table In Salesforce Lightning Web Component

Like this article? Don’t forget to share it!

Sharing is caring ❤️

Rahul Joshi

Rahul is coding enthusiast and backbencher working to make it a safer environment with skills and knowledge.

#lightning #LWC #salesforce