Create Modal/Popup/Overlay Box in LWC Salesforce

modal window is a graphical control element subordinate to an application’s main window. It opens a small layer/window on top of the parent screen with a slight backdrop so that you can see the parent too. The advantage of this box is that you don’t need to navigate between pages, instead, change data in it close it and you are back on the parent screen. Creating Modal in LWC is very easy and just a task of minutes.

Modals/pop-ups can be created easily with few lines of code. There are various ways to create it. We will discuss one of the methods here.

Working Demo:

modal-popup-overlay-lwc-salesforce-demo

overlay-modal-lwc-salesforce

 

We will use a single component to show modal markup. A boolean variable will control the visibility of the modal.

 

Create the customModal lightning component.

For creating a new lightning web component, use the VS Code or other IDE.

 

Step-1: Open the customModal.html and paste the below code.

Step-2: Open the customModal.js-meta.xml and paste the below code.

 

Step-3: Open the customModal.js and paste the below code.

 

 

We used standard SLDS (Salesforce Lightning Design System) to give styling to our component. You can find it here SLDS.

Step-3: Call the LightningModal component in the lightning app.

 

modal-popup-lwc-salesforce-cafeforce

 

Also Check:

To create a Mass Approval component to Bulk Approve/Reject Approvals, check out: Mass Approval component

To create a Related list with Inline Edit Support, check out: Inline Editable Related List

For any queries or suggestions regarding this post, comment below:
Cheers … 🙂

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments