Build This Cool PopUp / Modal with React and CSS

Image for post
Image for post

A nicely styled version of an alert(), the modal, the popup. One of the sometimes annoying yet necessary elements of the web.

For this blog, I created a modal using React and CSS, and I’m going to show you how I went about it.

I assume there are millions of ways to achieve this. I’d love your feedback if you have any improvements.

the code on GitHub

Tutorial

Table of Contents

  • Preliminary Junk
  • CheckOut Component
  • PopUp Component
  • The Styles
  • Conclusion

Preliminary Junk

To begin, I set up a create-react-app deleted the default junk and set up a file structure like this:

Image for post
Image for post

To make this demo sweet, I set up a fake shopping cart.

Image for post
Image for post

The only thing that functions on this screen is the “Checkout!” button. I’m going to skip the code for this, but you can find it in the here.

CheckOut Component

I set up a CheckOut component that has a table displaying the items the user is purchasing and some other stuff for the sake of demoing the popup.

What’s important for the popup functionality are these lines of code:

Image for post
Image for post

On line 9, I set up a useState hook for toggling the popup on and off.

On line 11, I set up a variable called duringPopUp that will conditionally add the style " during-popup" to the elements it is applied to. This class will darken the background-color of those elements. I apply like this:

Image for post
Image for post
Image for post
Image for post

On line 48, I have a line of code that conditionally renders a PopUp component. That component receives setPopUp as props. This way I can toggle the PopUp off from within the PopUp component.

PopUp Component

My PopUp component is set up like this:

Image for post
Image for post

The content of PopUp can be whatever you need. I set all the buttons to simply toggle the component off. In reality, if someone wanted more bones, the MORE BONES! button would give them MORE BONES!

The Styles

Again, I’m going to skip most the styles in CheckOut.css file. Most of them set up the fake cart and make the buttons look a little nicer. Here’s what’s important for the popup.

Darken Background Colors in Checkout.js

Image for post
Image for post

Remember, this style is added when the popUp state is true. It darkens the background-colors wherever it is applied.

Image for post
Image for post
Image for post
Image for post

Styles for elements in PopUp.js

These are the styles for the outer most div in the PopUp container:

Image for post
Image for post

The important piece is position: fixed;. This will cause the component to render exactly where it is positioned by top and left. Since it is fixed, it will stay in the same position even if you scroll.

Conclusion

Hope this helps you create the most irritating advertisement the web has ever seen. Kidding, of course, but I do hope this helps with your popup design. I’d love some feedback. Hit me up at jason.melton2@gmail.com. Thanks for reading. Best, Jason.

Written by

Software dev. Love root beer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store