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 lightning component.
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 lightning 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 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
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
Create custom expand all/ collapse all for accordion section rows table based in lightning component | how to create expand/collapse in lightning component Salesforce
Author of w3web.net
Hi, This is Vijay 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