modal box in salesforce lightning component

Create Modal/Popup Box In Lightning Component – Salesforce

Lightning Component

Today’s In This Sample Example We will create a custom Lightning Modal/Popup Box in the salesforce lightning component.
and also will be show/hide the Modal Box with Clinet Side (javaScript) controller.

Prerequisites : Basic understanding of Lightning Components & HTML
 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]
    <!--use boolean attribute for Store true/false value,
    make default to "false" so modal box are not display on the load of component. 
    <aura:attribute name="isOpen" type="boolean" default="false"/>
    <!--Use "slds-m-around_xx-large" class to add standard X-Large padding to the component--> 
    <div class="slds-m-around_xx-large">
        <lightning:button variant="brand"
                          onclick="{! c.openModel }" />
        <!--Use aura:if tag to display Model Box, on the bese of conditions. [isOpen boolean attribute] -->   
        <aura:if isTrue="{!v.isOpen}">
            <!--###### MODAL BOX Start######--> 
            <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 BOX HEADER Start ######-->
                    <header class="slds-modal__header">
                        <lightning:buttonIcon iconName="utility:close"
                                              onclick="{! c.closeModel }"
                        <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">About</h2>
                    <!--###### MODAL BOX BODY Part Start######-->
                    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                        <p><b>The goal of this blog is to provide tips and tricks/workarounds for salesforce developer and admins.
                            Many of us face the same issues and have the same questions when using and implementing Salesforce.
                            As a community of users and developers, it is important for us to share our experiences.
                            I try to reach out to other users and help the Salesforce community in general.
                            Much of this blog will focus on Lightning(code &amp; config.) but I will also
                            cover some of the more basic topics in salesforce.
                    <!--###### MODAL BOX FOOTER Part Start ######-->
                    <footer class="slds-modal__footer">
                        <lightning:button variant="neutral" 
                                          onclick="{! c.closeModel }"/>
                        <lightning:button variant="brand" 
                                          label="Like and Close"
                                          title="Like and Close"
                                          onclick="{! c.likenClose }"/>
            <div class="slds-backdrop slds-backdrop_open"></div>
            <!--###### MODAL BOX Part END Here ######-->
  • See Code Comments ūüôā
  • To Understand the Lightning Modal standard CSS Style Classes such as ¬†“slds-modal__container”, check here.
demoModalController.cmp [Js Controller Code]
   openModel: function(component, event, helper) {
      // for Display Model,set the "isOpen" attribute to "true"
      component.set("v.isOpen", true);

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

   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);
  • See Code Comments ūüôā
<aura:application extends="force:slds">
<!-- here c: is org. namespace prefix-->

After the winter 17 release you can ¬†use the Lightning Design System style in Lightning Apps by extends=‚ÄĚfore:slds‚ÄĚ. ¬†The Salesforce Lightning Design System provides a look &¬†feel that‚Äôs consistent with Lightning Experience. Use Lightning Design System styles to give your custom applications a UI that is consistent with Salesforce.


modal box in salesforce lightning component

Some Useful Resources : 

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¬† ūüôā



  • 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

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

  • 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

  • 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?

  • 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,

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

  • 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?

  • 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!!!




  • 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!



  • 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]

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



  • 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

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

  • Hii i have placed a record edit form inside the modal as soon as I submit the record edit form the modal automatically gets close does anyone know why this is happening?

  • haii all,

    can someone help me i need a pop up whenever i tried to del record in lwc
    thanks in advanve
    [email protected]

    js file

    const actions = [
    const columns = [
    typeAttributes:{ rowActions: actions },
    export default class DisplayRecordWithDataTable extends NavigationMixin(LightningElement) {
    @track sortBy;
    @track sortDirection;
    @track data;
    @track columns = columns;
    doSorting(event) {
    this.sortBy = event.detail.fieldName;
    this.sortDirection = event.detail.sortDirection;
    this.sortData(this.sortBy, this.sortDirection);
    sortData(fieldname, direction) {
    let parseData = JSON.parse(JSON.stringify(;
    // Return the value stored in the field
    let keyValue = (a) => {
    return a[fieldname];
    // cheking reverse direction
    // sorting data
    parseData.sort((x, y) => {
    // sorting values based on direction
    }); = parseData;

    accounts(result) {
    if ( {
    let nameUrl; =;
    this.error = undefined;
    } else if (result.error) {
    this.error = result.error; = undefined;
    callRowAction(event) {
    const recId =  event.detail.row.Id;
    const actionName =;
    attributes: {
    recordId: recId,

    this.dispatchEvent(new ShowToastEvent({
    return refreshApex(this.getAccounts);


    html file
    <template if:true = {accounts}>

    <template if:true = {error}>



Leave a Reply