Hey guys, today in this post we are going to learn about how to display a Modal/Popup on click button with a form inside a lightning component using aura method.
Files we used in this post example:-
| modalPopupaApp.app | Lightning Application | It is used for call the component to preview on browser. |
|
modalPopupParent.cmp |
Lightning Component | It is parent component of "childPopup.cmp". |
|
modalPopupParentController.js |
Lightning Component Controller | It is used for click functionality that gets the value from child component to aura method. |
| childPopup.cmp | Lightning Component | It is a child component of "modalPopupParent.cmp" and hold aura method with action method. |
| childPopupController.js | Lightning Component Controller | It is used for display and close the Modal/Popup. |
Final Output
Other related post that would you like to learn in Salesforce
Step 1:- Create Lightning Application : modalPopupaApp.app
From Developer Console >> File >> New >> Lightning Application
modalPopupaApp.app [Component Application File]
|
1 2 3 |
<aura:application extends="force:slds"> <c:modalPopupParent.cmp/> </aura:application> |
Step 2:- Create Lightning Component : modalPopupParent.cmp
From Developer Console >> File >> New >> Lightning Component
modalPopupParent.cmp [Lightning Component File]
|
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 |
<aura:component> <c:childPopup aura:id="eventPopId"/> <div class="slds-p-around--medium"> <button class="slds-button slds-button--brand" onclick=" {!c.OpenEventPopup}">Open Event Popup</button> <br/><br/> <!--Start RelatedTopics Section--> <div style="border:1px #ddd solid; padding:10px; background:#eee; margin:40px 0;"> <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/05/thumbsUpLike.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:16px; font-style:italic; display:inline-block; margin-right:5px;">Don't forget to check out:-</span><a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer" style="text-decoration:none;" data-aura-rendered-by="440:0">An easy way to learn step-by-step online free Salesforce tutorial, To know more Click <span style="color:#ff8000; font-size:18px;" data-aura-rendered-by="442:0">Here..</span></a></strong></p> <br/><br/> <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/07/tickMarkIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:17px; font-style:italic; display:inline-block; margin-right:5px; color:rgb(255 128 0);">You May Also Like →</span> </strong></p> <div style="display:block; overflow:hidden;"> <div style="width: 50%; float:left; display:inline-block"> <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> <li><a href="https://www.w3web.net/lwc-get-set-lightning-checkbox-value/" target="_blank" rel="noopener noreferrer">How to get selected checkbox value in lwc</a></li> <li><a href="https://www.w3web.net/display-account-related-contacts-in-lwc/" target="_blank" rel="noopener noreferrer">how to display account related contacts based on AccountId in lwc</a></li> <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to create lightning datatable row actions in lwc</a></li> <li><a href="https://www.w3web.net/if-and-else-condition-in-lwc/" target="_blank" rel="noopener noreferrer">how to use if and else condition in lwc</a></li> <li><a href="https://www.w3web.net/get-selected-radio-button-value-and-checked-default-in-lwc/" target="_blank" rel="noopener noreferrer">how to display selected radio button value in lwc</a></li> </ul> </div> <div style="width: 50%; float:left; display:inline-block"> <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> <li><a href="https://www.w3web.net/display-account-related-contacts-lwc/" target="_blank" rel="noopener noreferrer">display account related contacts based on account name in lwc</a></li> <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to insert a record of account Using apex class in LWC</a></li> <li><a href="https://www.w3web.net/fetch-picklist-values-dynamic-in-lwc/" target="_blank" rel="noopener noreferrer">how to get picklist values dynamically in lwc</a></li> <li><a href="https://www.w3web.net/edit-save-and-remove-rows-dynamically-in-lightning-component/" target="_blank" rel="noopener noreferrer">how to edit/save row dynamically in lightning component</a></li> <li><a href="https://www.w3web.net/update-parent-object-from-child/" target="_blank" rel="noopener noreferrer">update parent field from child using apex trigger</a></li> </ul> </div> <div style="clear:both;"></div> <br/> <div class="youtubeIcon"> <a href="https://www.youtube.com/channel/UCW62gTen2zniILj9xE6LmOg" target="_blank" rel="noopener noreferrer"><img src="https://www.w3web.net/wp-content/uploads/2021/11/youtubeIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;"/> <strong>TechW3web:-</strong> To know more, Use this <span style="color: #ff8000; font-weight: bold;">Link</span> </a> </div> </div> </div> <!--End RelatedTopics Section--> </div> </aura:component> |
Step 3:- Create Lightning Component : modalPopupParentController.js
From Developer Console >> File >> New >> Lightning Component >> JavaScript Controller
modalPopupParentController.js [JavaScript Controller]
|
1 2 3 4 5 6 |
({ OpenEventPopup : function(component, event, helper) { var modalFade1 = component.find('eventPopId'); component.find("eventPopId").submitDR(modalFade1); }, }) |
Step 4:- Create Lightning Component : childPopup.cmp
From Developer Console >> File >> New >> Lightning Component
childPopup.cmp [Lightning Component File]
|
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 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 |
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" > <aura:method name="submitDR" action="{!c.openEventPopup}"> <aura:attribute name="showModalFade" type="string"/> <aura:attribute name="darkModalBackdrop" type="String"/> </aura:method> <section role="dialog" class="slds-modal" aura:id="modalFade"> <div class="slds-modal__container"> <header class="slds-modal__header"> <button class="slds-button slds-modal__close slds-button--icon-inverse" title="Close" onclick="{!c.closeEventPopup}"> <c:svg class="slds-button__icon slds-button__icon--large" ariaHidden="true" xlinkHref="/resource/SLDS090/assets/icons/utility-sprite/svg/symbols.svg#close" /> </button> <h2 class="slds-text-heading_medium slds-hyphenate">Modal Header</h2> </header> <div class="slds-modal__content slds-p-around_medium"> <div class="slds"> <div class="slds-grid slds-wrap"> <div class="slds-p-horizontal--medium slds-col slds-size_6-of-12 slds-m-bottom--medium"> <div class="slds-form-element"> <label class="slds-form-element__label">Name</label> <div class="slds-form-element__controller"> <ui:inputText class="slds-input" value="" aura:id="userName"/> </div> </div> </div> </div> <div class="slds-grid slds-wrap"> <div class="slds-p-horizontal--medium slds-col slds-size_6-of-12 slds-m-bottom--medium"> <div class="slds-form-element"> <label class="slds-form-element__label">Email</label> <div class="slds-form-element__controller"> <ui:inputEmail class="slds-input" value="" aura:id="userEmail"/> </div> </div> </div> </div> <div class="slds-grid slds-wrap"> <div class="slds-p-horizontal--medium slds-col slds-size_6-of-12 slds-m-bottom--medium"> <div class="slds-form-element"> <label class="slds-form-element__label">Phone</label> <div class="slds-form-element__controller"> <ui:inputPhone class="slds-input" value="" aura:id="userPhone"/> </div> </div> </div> </div> <div class="slds-p-horizontal--medium slds-col slds-size_6-of-12 slds-m-bottom--medium"> <div class="slds-form-element"> <label class="slds-form-element__label">State</label> <div class="slds-form-element__controller"> <ui:inputSelect class="slds-select" aura:id="userState" value=""> <ui:inputSelectOption text="--None--"/> <ui:inputSelectOption text="Delhi"/> <ui:inputSelectOption text="Haryana"/> <ui:inputSelectOption text="Karnataka"/> </ui:inputSelect> </div> </div> </div> <div class="slds-form--inline slds-p-horizontal--medium slds-col slds-size_6-of-12 slds-m-bottom--medium"> <div class="slds-form-element" aura:id="redCheck"> <div class="slds-form-element__control"> <div class="slds-checkbox"> <input type="checkbox" name="options" aura:id="checkbox1" id="checkbox1" value="" /> <label class="slds-checkbox__label" for="checkbox1"> <span class="slds-checkbox_faux"></span> <span class="slds-form-element__label">Red</span> </label> </div> </div> </div> <div class="slds-form-element" aura:id="greenCheck"> <div class="slds-form-element__control"> <div class="slds-checkbox"> <input type="checkbox" name="options" aura:id="checkbox2" id="checkbox2" value="" /> <label class="slds-checkbox__label" for="checkbox2"> <span class="slds-checkbox_faux"></span> <span class="slds-form-element__label">Green</span> </label> </div> </div> </div> </div> <div class="slds-form--inline slds-p-horizontal--medium slds-col slds-size_6-of-12 slds-m-bottom--medium"> <div class="slds-form-element"> <div class="slds-form-element__control"> <span class="slds-radio"> <input type="radio" id="radio1" value="" name="default" checked="" /> <label class="slds-radio__label" for="radio1"> <span class="slds-radio_faux"></span> <span class="slds-form-element__label">Radio Label One</span> </label> </span> </div> </div> </div> </div> </div> <footer class="slds-modal__footer"> <button class="slds-button slds-button--destructive" onclick="{!c.closeEventPopup}">Cancel</button> <button class="slds-button slds-button_brand">Save</button> </footer> </div> </section> <div class="slds-backdrop" aura:id="modalBackdrop"></div> </aura:component> |
Step 5:- Create Lightning Component : childPopupController.js
From Developer Console >> File >> New >> Lightning Component >> JavaScript Controller
childPopupController.js [JavaScript Controller]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
({ openEventPopup : function(component, event, helper) { var modalFade = component.find('modalFade'); var modalBackdrop = component.find('modalBackdrop'); $A.util.addClass(modalFade,'slds-fade-in-open'); $A.util.addClass(modalBackdrop,'slds-backdrop_open'); }, closeEventPopup : function(component, event, helper) { var modalFade = component.find('modalFade'); var modalBackdrop = component.find('modalBackdrop'); $A.util.removeClass(modalFade,'slds-fade-in-open'); $A.util.removeClass(modalBackdrop,'slds-backdrop_open'); }, }) |
Further post that would you like to learn in Salesforce
FAQ (Frequently Asked Questions)
How do I close the modal pop in Aura component?
The correct way to do that is to save the promise returned by showCustomModal() as an aura:attribute and use that to close the modal.
How do I create a modal popup in LWC?
Creating the modal popup is so easy in LWC and it's just few minutes of tasks. Modal Popup creates with the various methods will discuss only one of the way here. Create the Custom Component using VS code. In javascript, you only need to add or change in the value of the property.
What is force recordData?
A force:recordData component defines the parameters for accessing, modifying, or creating a record using Lightning Data Service. You have granular control on how you want to display or render the data in your custom component.
Related Topics | You May Also Like
How to Create a Modal Popup With a Form Inside as Shaw/Hide on Click Button Using ‘@track’ Const Variables in Lightning Web Component – LWC | how to display modal popup with a form inside in lwc
How to validate child component from parent component on click button using aura method in lightning component | how to validate child component from parent component in lightning component Salesforce
How to Create Custom Accordion Expand, Collapse and Toggle Section in Lightning Component | create lightning component Accordion Expand/Collapse/Toggle section in salesforce lightning component
How to Show/Hide a Custom Loading Spinner Image in Salesforce Lightning Component | how to add a spinner to the lightning component Salesforce
Get Picklist Values Dynamically and display Picklist values & Radio Buttons value in Lightning Component Salesforce | how to get radio button and picklist value in lightning component
How to wrapper class retrieve all the values in Salesforce Lightning Component | how to pass wrapper class instance to fetch record from custom object in Salesforce lightning component
How to get the RecordType Name, RecordType DeveloperName, & SobjectType from the Account Object and display the Record Type Value in a Lightning Component Using aura:iteration in Salesforce | how to iterate record type name in lightning component
Create custom expand all/ collapse all for accordion section rows table based in lightning component | how to create expand/collapse in lightning component Salesforce
- Your reaction of the article ▾
Author of w3web.net
Hi, This is Vijay Kumar behind the admin and founder of w3web.net. I am a senior software developer and working in MNC company from more than 8 years. I am great fan of technology, configuration, customization & development. Apart of this, I love to write about Blogging in spare time, Working on Mobile & Web application development, Salesforce lightning, Salesforce LWC and Salesforce Integration development in full time. [Read full bio] | | The Sitemap where you can find all published post on w3web.net
You’re a beautiful inspiration. It really helps me in any situation. Where I stuck. Many of my friends told me to comment there post but I stuck what I should comment. Finally I got your post it always help me. Thanks for the lovely post.
this is your post
is good in tour article so like is webste is also good
This is a really nice post that helps a lot