Build This Cool PopUp / Modal with React and CSS
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
Table of Contents
- Preliminary Junk
- CheckOut Component
- PopUp Component
- The Styles
To begin, I set up a
create-react-app deleted the default junk and set up a file structure like this:
To make this demo sweet, I set up a fake shopping cart.
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.
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:
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:
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 is set up like this:
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!
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
Remember, this style is added when the
popUp state is
true. It darkens the
background-colors wherever it is applied.
Styles for elements in PopUp.js
These are the styles for the outer most div in the
The important piece is
position: fixed;. This will cause the component to render exactly where it is positioned by
left. Since it is
fixed, it will stay in the same position even if you scroll.
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
firstname.lastname@example.org. Thanks for reading. Best, Jason.