How To Create Modal/Popup Box In Salesforce Lightning Component

Hey guys, today in this post we will create a custom modal/popup window in salesforce lightning component. we can show/hide model box using client side javaScript controller

Prerequisites : Basic understanding of Lightning Components & HTML

Lightning Web Component [LWC] Version : Check here

What is Modal in Salesforce Lightning Experience ?

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

Modal box in Lightning Experience Looks Like this -:

modal box in salesforce lightning component



demoModal.cmp [Lightning Component Code]

  • See Code Comments 🙂
  • To understand the lightning modal standard CSS Classes such as  “slds-modal__container” check here.
demoModalController.cmp [Js Controller Code]

  • See Code Comments 🙂


modal box in salesforce lightning component

Related Resources : 
Other popular Post :

Follow us for new post updates. & Don’t forget to bookmark this site for your future reference.

Facebook :

Instagram :


(Visited 119,444 times, 1 visits today)

33 thoughts on “How To Create Modal/Popup Box In Salesforce Lightning Component”

  1. Hi Brahmaj,

    is there a way in which we can avoid scrolling of faded background.

    <div class=”slds-modal-backdrop slds-modal-backdrop–open” ></div>

    I mean in my scenario when modal popup opens , we can still scroll background.


    • Hi Piyush
      try this One ,
      openModel: function(component, event, helper) {
      // for Display Model,set the “isOpen” attribute to “true”
      component.set(“v.isOpen”, true); = “hidden”;

      closeModel: function(component, event, helper) {
      // for Hide/Close Model,set the “isOpen” attribute to “Fasle”
      component.set(“v.isOpen”, false); = “auto”;

      likenClose: function(component, event, helper) {
      // Display alert message on the click on the “Like and Close” button from Model Footer
      // and set set the “isOpen” attribute to “False for close the model Box.
      alert(‘thanks for like Us :)’);
      component.set(“v.isOpen”, false); = “auto”;

      Hopes it helps

  2. Hi Brahmaji,

    Your blog is amazing man. Good insight towards lightning. I have used your code base to create new records by enabling users to select record types. In tat we added that as a tab and on tat we have a button which navigates us to select records types.

    But can we setup a but on a detail page and clicking on the button should directly take us to the record type selection. Can you help me in guiding towards that.

    Appreciate your help

    Thank you.

  3. Hi Brahmaji,

    I made a change in the component and was able to initiate the recordtype selection modal box on the click of a button on a detail page. Below is the code.

    <aura:component controller=”recordtypeController” implements=”force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction” access=”global”>
    <aura:handler name=”init” value=”{!this}” action=”{!c.openModal}”/>
    <aura:handler name=”init” value=”{!this}” action=”{!c.fetchListOfRecordTypes}”/>

    <aura:attribute name=”lstOfRecordType” type=”String[]” />
    <aura:attribute name=”isOpen” type=”boolean” default=”false” />


    Rest of the code is as it is. So at the top, instead of the lightning button, I used aura:handler to initiate the action.

    But I am facing an issue here. The first time , when I click on the button and see the first recordtype – I click next – I see an error in the back ground “Error! Please contact your administrator” .

    Now when I change the recordtype and then click next, its working as expected.

    So I again reloaded the page,clicked on the button, changed to second recordtype and then changed it to the first record type which is displayed , it worked fine.

    So basically , as soon as the box loads I have to change the recordtype and then proceed. I am unable to capture any error in the inspect element as well.

    Can you tell me what could the issue be.

    Thank you

  4. I have created a record type of opportunity with three values.Now I want if any of the value is selected then a new popup window appears and lets me select some other feild.


    Can you suggest me how to proceed?

  5. Hi,
    This portal is really helping us a lot in our day to day lightning components implementation. Thanks.

    We have same requirement for modal/popup window, i have used the same code. Unfortunately it is not working for me. I have used the same code as above and created components, still it is not working for me. Please can you please suggest me, are there any other thing which we should take care while implementing the modal windows?

    Thanks and Regards,

  6. Hey Piyush, thanks for this awesome post. How do i capture the value (cancel and save) from the modal and display it above the button.

  7. Hi,

    Please help me to solve this. I have override the New standard button with my Lightning Component. When I click on the New button, it should not clear the Recently viewed page, it should open on the same page. How to do this?

  8. How to re-position the modal? currently modal is displaying in center of the page, I would like to re-position it in the top of the page.

    Please help!!!




  9. Hi ,

    i am new to lightning and all together new to modals.

    I have received a requirement where i need to create a spinner, kind of a clock which should pop up for the pages where it takes more than 20sec to load the page. it is asked to use slds and make it as generic as possible.Also using modals they have asked to grey out the whole page and only this clock should pop up.

    How to achieve this.Please help!



  10. Hi SFDC Monkey ,

    Can you please help me out for filtering Multiselect Picklist values based on RecordType.

    So if any code please help me out..and i have seen That blog related to Multiselect Picklist

    Please help me out

    Thanks & Regards



    [email protected]

  11. Hi SFDC Monkey,

    I need to know how can I call the pop up through a standard button ? The button is basically placed on a standard lightning record page.



  12. Hello SFDC Monkey,

    Do you have a solution on how to make the SLDS-FADE-IN-OPEN work? Because even though you put slds-fade-in-open, it doesnt fade-in or out upon calling. Thank you

  13. Hi,
    Is this Modal functionality can be done thru Tab or custom object? I mean we have a requirement to show popup message when the Contract tab is click. if yes, please give a link for more information.

  14. In all my Sandbox model-popup functionality is working weird now. Not showing as pop-up instead displaying on top the component page, once click on the multiple buttons which are different popups are populating on top of the page one on other. Please let me know if there is any change in the Winter20 sandbox release. The same will soon hit prod in October.

    Need your feedback.

  15. Thank for for your helpful Post. Could you please help with how I can open Modal in new tab instead of open it in same tab/window.


Leave a Comment