Modal Magic
By: Meagan Ritchie
Tags: Flatiron School, Beginner, JavaScript, CSS, Modal

Project week at Flatiron was full of collaboration, trying out new workflow habits, creativity, and of course, building a project. We were tasked to use our new learning of HTML, CSS and JavaScript to build an app. My partner and I made a pretty simple and adorable wildflower identifier app, Wildflower.

Wildflower App

My favorite part of creating the app was playing with CSS. One of the things that I was excited to try from the beginning of the week was creating a modal to display anything .As we started to build out our app it made sense to have buttons trigger a modal opening with more details for each flower. Cue the excitement! I loved creating this little feature and want to share the process. I hope you can use this to create your own pop-up!

We started in our HTML file. We created a modal container and the modal itself. Inside the modal are elements we used to display information from our backend, and a button element to close itself.

<div class=”modal-container” id=”modal-container”>

<div class=”modal”>

<h1 id=”flower-name”></h1>

<p id=”flower-details”></p>

<button id=”close-button”>Close</button>

</div>

</div>

We moved right along to the JS file to create a button to show up on each one of the cards. We called it “detailOpenButton”. In the process of the button being created, we set an event listener to add a class to the modal container that we could manipulate later in CSS. The button also rendered the info from the backend onto the modal.

We need the close button that we added to our HTML to remove the class name so that it would go back to being un-seen by the user.

detailOpenButton.addEventListener("click", () => { modalContainer.classList.add("show") document.getElementById("flower-name").innerHTML = flower.name document.getElementById("flower-details").innerHTML = flower.details

} closeButton.addEventListener("click", () => { modalContainer.classList.remove("show")

Now to the fun part! We need the modal to be out of sight and un-clickable while the user is using the filters and looking at their flower cards. To do that, we made the default opacity for modal container 0 and set the pointer events to none. We also wanted the modal to be centered on the page, so we gave the container properties to do that.

.modal-container {

background-color: rgba(0, 0, 0, 0.2);

display: flex;

align-items: center;

justify-content: center;

position: fixed;

opacity: 0;

pointer-events: none;

}

We used some super simple styling for the modal. Gave it some rounded corners and a little box shadow so it didn’t look totally un-styled.

.modal {

background-color: rgb(255, 255, 255);

border-radius: 15px;

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

padding: 30px 50px;

width: 400px;

max-width: 100%;

text-align: center;

Finally, we need the modal to come into view and be clickable when the open button is clicked. We can use the .show class that we add to the container to change this with CSS. We add the show class when we click the open button, and we remove it when we click the close button.

.modal-container.show {

pointer-events: auto;

opacity: 1;

And there you have it! A modal! There are many ways to make this, so use whichever way makes sense to you. Enjoy clicking open and close 100 times like I did to see your work in action.

Happy coding!