My phase 4 project, Workout Planner, is a simple application that allows the User to create a Workout as well as add Exercises to the Workouts through form submission. When the User clicks the button to “create”, a form will pop-up over the current page where they can add data. This pop-up is called a Modal and they are used across many different websites/apps. For Example, go to https://www.pinterest.com/ and click the Log in button in the top right. You should see a login form open and now you can select this the Element (Ctrl + Shift + C) or Pop-Up. You will see that you have selected a class with the id “login-modal-default”.
My implementation of a Modal in my project is very basic, but has similar behavors as Pinteret’s above. In this post, I will be walking through how I added this piece to my project and maybe provide some guidance on how others can add this cool feature to their apps.
https://www.w3schools.com/howto/howto_css_modals.asp
Go to W3 schools — How To Create a Modal Box. This article will give you a head start on adding it.
I started with copying the css from the article and adding it to my css file. Since I copied and pasted code, I also commented out the url and sourced where I got it from which is recommended.
Next, I grabbed the “Modal and Modal content” from the article and pasted it in my index.html document. This will scaffold a default modal with a background and a content child element that you can change to your liking.
Now, if you refresh your index.html page, you should have a Hidden Element that you can select in your console with a querySelector. Testing the Modal’s ability to open and close, you can select the modal element and call style.display, setting it equal to ‘block’ to open or equal to ‘none’ to close.
Once I saw how to open and close a Modal, I created its own class to handle all of the functions for the desired behaviors after selecting the element. In this class, I wrote functions to open and close the modal and also connected this file to my index.html file. I also defined a constant in my index.js file that will create an instance of the Modal class when the app starts up.
After all of this is when I started to define more Modal functions and update the styling to what I wanted. Most of the rest of my Modal implementation was specific to my app, like adding a form to it as well as adding a submit button, but there are many different way you can use them. Modals are a great tool to work with and I highly suggest you try them out too!
