Modal/Popup Lightning Web Component(LWC)

Modal/Popup Lightning Web Component(LWC) Salesforce

In this post, We will simply create a custom Modal/Popup Box in the lightning web component(LWC).

What is Modal in Salesforce Lightning Experience?

Modals/Popup Box are used to display content in a layer above the app. This paradigm is used in cases such as the creation or editing of a record, as well as various types of messaging and wizards.

Modal/Popup Lightning Web Component(LWC) Salesforce looks like following image

 

This post is about creating Modal/Popup in Lightning Web Component(LWC). If you want to know how to create Modal/Popup in Lightning aura component, please refer to Modal/Popup Lightning Component Salesforce

ModalPopup Example Lightning Web component(LWC)

In this code we are first declaring ‘isModalOpen’ attribute and setting its default value as false. Then using template if:true we are conditionally displaying modal/popup on click of button.

Also code has following three main part

• section
• header
• footer

Details are explained in code comment.

Following is expected markup

Expected markup in in modal/popup

• Modal has role="dialog"
• When the modal is open, everything behind it has HTML attribute aria-hidden="true", so assistive technology won’t read out the underlying page. The best way to do this is to give the modal and the page separate wrapper elements and toggle aria-hidden="true"/aria-hidden="false" on the main page’s wrapper depending on whether or not the modal is open.
• Modal contains an HTML heading
• Modal has an aria-labelledby attribute whose value is the id of the modal’s heading

 

modalPopupLWC.html

<template>     <!-- lightning button for open modal window -->     <lightning-button variant="brand"        label="What is Modal/PopUp in LWC?"        title="What is Modal/PopUp in LWC?"        onclick={openModal}        class="slds-m-left_x-small">     </lightning-button>     <!--Use template if:true to display/hide popup based on isModalOpen value-->      <template if:true={isModalOpen}>         <!-- Modal/Popup Box LWC starts here -->         <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">             <div class="slds-modal__container">                 <!-- Modal/Popup Box LWC header here -->                 <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"                             variant="inverse"                             size="small" ></lightning-icon>                         <span class="slds-assistive-text">Close</span>                     </button>                     <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Modal/PopUp Box header LWC</h2>                 </header>                 <!-- Modal/Popup Box LWC body starts here -->                 <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">                     <p><b>Modals/Popup Box are used to display content in a layer above the app.                     </b></p>                     <p><b>This paradigm is used in cases such as the creation or editing of a record, as well as various types of messaging and wizards.                     </b></p>                 </div>                 <!-- Modal/Popup Box LWC footer starts here -->                 <footer class="slds-modal__footer">                     <button class="slds-button slds-button_neutral" onclick={closeModal} title="Cancel">Cancel</button>                     <button class="slds-button slds-button_brand" onclick={submitDetails} title="OK">OK</button>                 </footer>             </div>         </section>         <div class="slds-backdrop slds-backdrop_open"></div>     </template>  </template>

 

modalPopupLWC.js

import { LightningElement,track } from 'lwc'; export default class ModalPopupLWC extends LightningElement {     //Boolean tracked variable to indicate if modal is open or not default value is false as modal is closed when page is loaded     @track isModalOpen = false;     openModal() {         // to open modal set isModalOpen tarck value as true         this.isModalOpen = true;     }     closeModal() {         // to close modal set isModalOpen tarck value as false         this.isModalOpen = false;     }     submitDetails() {         // to close modal set isModalOpen tarck value as false         //Add your code to call apex method or do some processing         this.isModalOpen = false;     } }

 

modalPopupLWC.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">     <apiVersion>48.0</apiVersion>     <isExposed>true</isExposed>     <targets>         <target>lightning__AppPage</target>         <target>lightning__RecordPage</target>         <target>lightning__HomePage</target>     </targets> </LightningComponentBundle>

Now we can add this lwc component on home page.

• Go to Home page
• Click Setup (Gear Icon) and select Edit Page.
• Under Custom Components, find your modalPopupLWC component and drag it on right-hand side top.
• Click Save and activate.

 

User will see button in home page. After clicking the button user will see popup as shown in image above.

More details about lightning modal/popup

Modals always have an equal amount of space at the top and bottom to account for the height of the close button.

Modals grow according to how much content is within, but once the modal reaches full height (including the previously mentioned space on top and bottom), the content area will begin to scroll. (This scrolling is currently not available in Salesforce1 Mobile.)

For more details about modal in lightning, please refer to modal lightning