Hello there & Welcome back! 😀
In this post we will be learning how to use Lightning Design System(SLDS) Modal/Popup in Salesforce Lightning Web Components.
First, let us understand what CSS classes help us show or hide the SLDS Modal. According to the SLDS Modal Component Blueprint:
What does it do?
Allows the modal(white popup) to be visible
Allows the backdrop(grey overlay) to be visible
Hence, adding/removing these classes to the appropriate elements help us show/hide the Modal with some beautiful transition.
Let’s start building!
- Line 5 –
@track isModalOpen– boolean property is used to track if the modal is open or not, the modal is closed by default so, the property is defaulted to false.
showModal()method is called by the button that is used to open/show the modal and sets the
closeModal()method is called by the button that is used to close/hide the modal and sets the
- Optionally, instead of using two methods (
closeModal()) to open or close the modal
we can just use the single
toggleModal()method to toggle the modal (open if closed & close if opened)
- The two getters functions –
modalBackdropClass– compute and return the CSS classes of the modal and the backdrop depending on the value of
- If the
isModalOpen = false,
- And if the
isModalOpen = true,
- If the
- Line 27 & Line 32 are strings with template literals and ternary condition.
That’s it! We have our shiny new modal with beautiful transitions!
Learn Lightning Web Components with Trailhead
More on Getters in LWC
- Template literals (Template strings)
I am a passionate coder who loves to learn new things and solve problems with the help of coding.
I am also a Hobbyist Photographer. Tech Geek. Gadget Freak. Gamer. Youtuber.
The More You Give, The More You Get. and Learning Is Sharing.
I hope You Enjoy My Blogs. Thanks. 🙂
Work Hard, Play Harder. Peace 😀