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.
![](https://i0.wp.com/www.lopau.com/wp-content/uploads/2020/04/Screen-Shot-2020-04-27-at-12.54.39-PM.png?resize=900%2C453&ssl=1)
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