modal box in salesforce lightning component

Create Modal/Popup Box In Lightning Component – Salesforce

Lightning Component

Sharing is caring!

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  🙂

 

Sharing is caring!

(Visited 13,822 times, 19 visits today)

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

     

    • 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

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

Leave a Reply