Modals are pop-up windows or dialog boxes that display some sort of content above everything else on a web page. They usually are triggered by an event such as clicking on a button. They can also pop up automatically (which can be very annoying at times!). We’ve all probably come across one at some point while browsing the web. Many times they will display some content asking you for your email or to sign up for some sort of promotional offer. Well, today we won't be signing up for anything, we’ll be building one ourselves!
Now we can add some styling to make our modal more visually appealing by styling our buttons and the actual modal itself.
Let’s see what our closed modal is looking like so far.
This sets up the functionality for opening and closing our modal. Now when a user clicks on the Contact Me button our user will see the modal with all the contact details displayed.
Modals are meant to capture a user’s attention. When modals are triggered everything else on the page becomes temporarily deactivated. This creates an immediate focus on the information the modal is presenting. Sometimes this can enhance the user experience, other times it can do the exact opposite. It all depends on the use case and whether or not the modal presents useful content that’s relevant to the user.