Create Modal/Popup Box In Lightning Component – Salesforce
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 -:
This Custom Lightning Modal NOT COMPATIBLE WITH S1 MOBILE APP
demoModal.cmp [Lightning Component Code]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<aura:component> <!--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" label="About SFDCmonkey.com" title="About SFDCmonkey.com" 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 }" alternativeText="close" variant="bare-inverse" class="slds-modal__close"/> <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">About Sfdcmonkey.com</h2> </header> <!--###### 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 & config.) but I will also cover some of the more basic topics in salesforce. </b> </p> </div> <!--###### MODAL BOX FOOTER Part Start ######--> <footer class="slds-modal__footer"> <lightning:button variant="neutral" label="Cancel" title="Cancel" onclick="{! c.closeModel }"/> <lightning:button variant="brand" label="Like and Close" title="Like and Close" onclick="{! c.likenClose }"/> </footer> </div> </section> <div class="slds-backdrop slds-backdrop_open"></div> <!--###### MODAL BOX Part END Here ######--> </aura:if> </div> </aura:component> |
- See Code Comments 🙂
- To Understand the Lightning Modal standard CSS Style Classes such as “slds-modal__container”, check here.
demoModalController.cmp [Js Controller Code]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
({ 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 🙂
TestApp.app
|
1 2 3 4 5 6 7 8 |
<aura:application extends="force:slds"> <c:demoModal/> <!-- here c: is org. namespace prefix--> </aura:application> |
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-:
Some Useful Resources :
- Salesforce Lightning Design Modals Documentation
- Using Aura:if for Conditionally renders on component body
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 🙂
33 comments
Love this solution, works great!
Thanks for your feedback @Bhargav
I need help after saving a record from using standard create save i need to getback for the same button landing page
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?
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
Hi sreeram,
can you elaborate your issue, and post your query in details here :
https://developer.salesforce.com/forums
and share URL here of your post, so i can look into it.
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!!!
Thanks
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
post your issue on developer forums in more details and share question URL here, so i can look into your issue. Thanks
https://developer.salesforce.com/forums
Hi I want Multi Select Picklist values based on Recordtype so if any component pls Pass to me
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]
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.
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
Nice, easy introduction to modal popups! 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.
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.
i will check and let you update ASAP. thanks
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.
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.
Can’t close modal if you set isOpen default to true.
Thanks a lot.
You saved me!