How to display a Modal/Popup on click button using aura method in lightning component
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 post that would you like to learn
Step 1:- Create Lightning Application : modalPopupaApp.app
From Developer Console >> File >> New >> Lightning Application
modalPopupaApp.app [Component Application File]
Step 2:- Create Lightning Component : modalPopupParent.cmp
From Developer Console >> File >> New >> Lightning Component
modalPopupParent.cmp [Lightning Component File]
Step 3:- Create Lightning Component : modalPopupParentController.js
From Developer Console >> File >> New >> Lightning Component >> JavaScript Controller
modalPopupParentController.js [JavaScript Controller]
Step 4:- Create Lightning Component : childPopup.cmp
From Developer Console >> File >> New >> Lightning Component
childPopup.cmp [Lightning Component File]
Step 5:- Create Lightning Component : childPopupController.js
From Developer Console >> File >> New >> Lightning Component >> JavaScript Controller
childPopupController.js [JavaScript Controller]
Originally published at https://www.w3web.net on August 18, 2020.
