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 togglearia-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
6 comments
Skip to comment form
It might be better to abstract the model part of the logic to a separate component right? Checkout this example – https://salesforcecodes.blogspot.com/2020/01/how-to-display-modal-window-using.html
Thanks a lot man. Was in desperate need of this.
Hi
I want to add {Cookie Popup} in my LWC website but not found any related, if know how can i add cookie popup in my LWC component, please setup the example.
Can we prevent background from scrolling when modal is opened in LWC . if yes then how ?
When User login to salesforce the and then only popup will be displayed on home. If home page reloads then it should not be displayed. Please help me to figure it out ASAP…..I have used the same code for my scenario….
is it possible to show screen flow as a popup (when clicked on a button on the case record page)?