A quick tutorial on how to create a modal popup with Lightning Component.
What is modal popup?
Modal popup acts like a container for your content that displays on top of the content you are viewing. Imagine content stacked on top of it.
In short, a modal popup is a very handy way of showing content in front of your app.
How to build one in lightning?
- First create lightning component and add a boolean attribute then default it’s value to false
- Next, add an aura:if statement around the content you want to appear as modal
- Then use the SLDS(Lightning Design System) Modals as a reference to create the type of modal UI you want https://www.lightningdesignsystem.com/components/modals/#site-main-content
- basically use the CSS styling guideline for the section, header, footer for the look of your modal popup.
- On your controller, toggle the boolean value as you see fit based on events.
- cancelBtn onclick event sets the displayModal value to true, thus displaying the modal.
- yesBtn onclick event tied to the button navigates to another URL and sets the displayModal value back to false, thus hiding the modal popup
That’s it, you should have a working modal popup ready to go.
Final code is available here in GitHub