A great way to create a simple modal from scratch
Modals are one of the most used components in the UI, we can find them in the most popular CSS frameworks like Bootstrap or libraries of UI components like TailwindUI.
They are useful because in our projects we often want to show messages or we need to allow users to make an action without to change page.
Usually, I used Bootstrap modals on my projects but when I changed job I started to work with Vue.js and TailwindCSS and one of my first tasks was to create a modal component.
So I started some research, I found many examples and packages which were doing that, but these did not cover all the cases, some of the most common problems were:
- when the modal was very high it was cut
- when the modal was open, the body of the page was still scrollable
- they did not give to the parent the possibility to customize the content of the modal
- they didn’t give explicit methods to trigger some events on the opening and closing actions
Today we are going to build a modal component that should be fine for every need, it will fix the problems above:
- it will fit the page according to its content and it will become scrollable automatically
- when the modal is open, the body of the page will not be scrollable
- the parent will be free to customize the component adding also HTML
- there are closeModal() and openModal() events that will give you the opportunity to trigger other events.
Check out how to build your modal component on Medium 👇
Medium
Ps. In the comments you will find the friends link if you have finished your monthly view on Medium. If you are not happy that the tutorial is on Medium, nobody forces you to read it.
Peace and love ✌️❤️
Top comments (1)
medium.com/notonlycss/how-to-build...