Creating A PopUp Window Using JS And React

Daniela Sandoval
Jul 22 · 6 min read

A small guide on creating the infamous “popup” window that is both a blessing and a curse for users with the help of JS and React.

Let’s Review 👓

Learning new languages and paradigms (especially within a short amount of time), can sometimes cause me to forget important information. So let’s take this moment to review critical areas to keep in mind when approaching front-end development.

  1. Identifying Events: These are the points in which our users interacts with an application. Whether we are looking out for a click, a mouseover, or even a scroll, this action is referred to as our “event”.
  2. Manipulating the DOM: After we’ve got our event, how are we going to change the DOM? Do we want to add or remove information? This is the point in which we actually change our DOM’s appearance.
  3. Making Requests to Our Servers: Although we can solely manipulate the DOM, we want information to persist. We also want our data to reflect what we have on our DOM. Furthermore, how on Earth are we going to get information if we don’t even consider our server in the first place?

Our thought process should go something like this: When X happens, fetch Y from the server, and then put X on/off the DOM. If you’ve attended The Flatiron School, you’re well acquainted with “slapping” things on the DOM.

Our Goals 📋

Now that we’ve got an idea on how approach front-end development, we’ve got the task of making a pop-up window. I use “pop-up” because of the nature of these windows. If we follow our layout we made earlier, the flow of a pop-up should go like this:

  1. When a user CLICKS somewhere on our site.
  2. We want to go GET information from somewhere.
  3. We want to PUT a window on our DOM/ CLOSE a window on our DOM/

For learning purpose, we’ll forgo step 2. Making a fetch request from our server is important, but getting a platform for our information to be placed on is what we’ll be covering today.

Vanilla JS 🍦

Somewhere out there, we’re going to have a user to will do an action to trigger a window to come up on there screen. Let’s look out for a “click” event on a specific button we’ve selected and add an event listener to it with a callback that will decide what we do next.

document.addEventListener("DOMContentLoaded",() => {
const the_button = document.querySelector(".js-btn")
the_button.addEventListener("click", handleClick)
})

In our callback, this is where we might possibly do some fetching, but for now let’s have handleClick manipulate our DOM. Now we need to do a couple things here, we need to make our window VISIBLE so we’ll achieve this by changing the style on our window using the CSS property display and it’s values none and block. Since we also have access to our window, this is where we need to add a second event listener on our close button to achieve a full “toggle” affect on our window.

function handleClick(event) {
const modal = document.querySelector(".modal")
const closeBtn = document.querySelector(".close")
modal.style.display = "block";
closeBtn.addEventListener("click", () => {
modal.style.display = "none";
})
}

Where exactly am I grabbing these elements from??? Let take a look at a simple HTML version of our window. Our pop-up will consist of two layers. I’ll be referring to the first layer as “the back layer” and it’s optional and for style purposes. It’s going to act as a transition between our app content and the newly made window. The back layer will essentially act like this:

The second layer is where your window will actually live and holds all information you want visible. The basic skeleton of your window should look something like this. I’ve also included a span tag in order for us to be able to get out of our window that we can call upon in our function!

<div class="modal">
<div class="modal_content">
<span class="close">&times;</span>
<p>I'm A Pop Up!!!</p>
</div>
</div>

Finally, let’s jazz up our window with some CSS so that our JS functions can actually have something to toggle. In our first layer, the key things we want to add a display set to none, a position of fixed(this tells your pop up content to fix itself according to THIS particular window), a transparent color (users need to see the previous content unless you don’t want them too?), and a z-index (the order in which elements are stacked and is subject to change) of 1.

.modal {
display: none;
position: fixed;
z-index: 1;
background-color: rgba(0, 0, 0, 0.25);
}

As for our content layer, the most important property we need to add is a position of absolute. Since the closest positioned element to our window is our first layer (considering you opted for it), it positions itself according to it!

.modal_content {
background-color: white;
position: absolute;
}

The result should work something like my example below!

React ⚛︎

Now that we’ve got the formalities of what it should do, how it works, and what it looks like. Using React to make a pop-up window won’t be as tedious. The only difference is that in React, it let’s users create reusable components. It’s like creating cookie cutters for your charity bake sale only with JSX. In this case, we’ll be creating a pop-up component.

Instead of toggling a CSS class, we’ll be setting a state within a JS file called App that will provide a place for all of our components to live. It will also tell our other components what they know and what they can do! It is essentially everyone’s mom. Our App will keep track of whether or not the window is visible using a boolean and in our current state of the App with state. We’ll pass a function to our PopUp component so that it can also change this state. Finally, we’ll conditionally render the component using a ternary.

import React from "react";
import PopUp from "./PopUp";
export default class App extends React.Component {
state = {
seen: false
};
togglePop = () => {
this.setState({
seen: !this.state.seen
});
};
render() {
return (
<div>
<div className="btn" onClick={this.togglePop}>
<button>New User?</button>
</div>
{this.state.seen ? <PopUp toggle={this.togglePop} /> : null}
</div>
);
}
}

As for what our PopUp component, it will house our window and use our togglePop function defined in our App to set the state over and over using a click event…

import React, { Component } from "react";export default class PopUp extends Component {
handleClick = () => {
this.props.toggle();
};
render() {
return (
<div className="modal">
<div className="modal_content">
<span className="close" onClick={this.handleClick}>&times; </span>
<p>I'm A Pop Up!!!</p>
</div>
</div>
);
}
}

With React, you could also add more power and responsibility to your window to turn it from a small regular pop-up into a fully functional modal. The difference between a pop-up that you see in your notification and a modal, is that modals can perform more arduous tasks.

Play around in this sandbox I made for the finished result!

Thoughts for the Future You

Whether you’re creating a pop-up window or a high powered modal like a chat window, it all starts from your though process and your approach as to how exactly you want to build it. The rest is honestly just CSS. If CSS and this whole process seems a tad bit overbearing, you can always checkout Bootstrap, Semantics, or other frameworks!

(But I would still suggest knowing the nature of how these windows work so you can use these libraries to their full potential.)

Daniela Sandoval

Written by

Software Developer | Flatiron Alumni | Proud cat mom! 🐈 💻 ✨

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade