Display Popup/Modal Window In Salesforce Lightning Web Component

Hi guys welcome back with another post on lightning web component series. today in this post we are going to learn that how we can create custom modal or popup window in salesforce lightning web component (LWC).

Modals 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.

Checkout : How to Create Lightning Web Component And Deploy To The Salesforce Org

lec modal sfdcmonkey.com

modalLwc.html [LWC HTML File]

modalLwc.js [LWC JavaScript File]

  • @track : Marks a property for internal monitoring. A template or function using
    this property forces a component to rerender when the property’s value changes.
    Use this to store values locally, especially as a user interacts with your

modalLwc.js-meta.xml [LWC Metadata XML File]

Output :

lwc modal output sfdcMonkey.com

Related Resources :
Other Popular Post :

Like our facebook page for new post updates. & Don’t forget to bookmark this site for your future reference.

if you have any suggestions or issue with it, you can post in comment box.

Happy Learning ?

(Visited 19,593 times, 1 visits today)

9 thoughts on “Display Popup/Modal Window In Salesforce Lightning Web Component”

  1. Hi,

    Good Work.. But my customization is Returning Sobject values in Modal window body. No button click action for fire. My component render at Homepage. I want to , Whenever close button click at modal window by user based again the modal window should not open again.

  2. Hello,

    I have tried the same in my DevHub org, but code does not shows Modal Dialog window. No change, i have copied code as is.

    Please advise/

    Thank you,


  3. Hi , In Mobile the modal comes at the center of page instead of being at top.How to make it float at the top always.


Leave a Comment