modal box in salesforce lightning component

Create Modal/Popup Box In Lightning Component – Salesforce

piyush soni 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

 

This Custom Lightning Modal NOT COMPATIBLE WITH S1 MOBILE APP

demoModal.cmp [Lightning Component Code]

  • See Code Comments 🙂
  • To Understand the Lightning Modal standard CSS Style Classes such as  “slds-modal__container”, check here.
demoModalController.cmp [Js Controller Code]

  • See Code Comments 🙂
TestApp.app

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.

Output-:

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  🙂

 

(Visited 74,969 times, 1 visits today)

26 comments

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

     

    Reply

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

      closeModel: function(component, event, helper) {
      // for Hide/Close Model,set the “isOpen” attribute to “Fasle”
      component.set(“v.isOpen”, false);
      document.body.style.overflow = “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);
      document.body.style.overflow = “auto”;
      },

      Hopes it helps
      Thanks

      Reply

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

    Reply

  • 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

    Reply
  • Pingback: Custom Record Type Selection Lightning Component -Salesforce Lightning

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

    Reply
  • Pingback: Show Multiple Screens With progress indicator on Modal Box in Lightning Component

  • 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,
    Sreeram.k

    Reply

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

    Reply

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

    Reply

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

    Thanks

     

     

    Reply

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

    Regards,

    Deepika

    Reply

  • 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

    Basavaraj.A

    9008544026

    [email protected]

    Reply
  • Pingback: Dynamically Open Salesforce Files (Document) In Lightning Component

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

     

    Thanks.

    Reply

  • 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

    Reply
  • Pingback: Dynamic Reusable Custom List View In Salesforce Lightning Component
  • Pingback: Display Popup/Modal Window In Salesforce Lightning Web Component

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

    Reply

Leave a Reply