DEV Community 👩‍💻👨‍💻

Konstantin Stanmeyer
Konstantin Stanmeyer

Posted on

Creating Pop-Ups

While coding, pop-up windows seem like a norm to put into most websites, and it seemed like it would be a simple addition to anyone's CSS files. It's how you sign up for websites every day, zoom into pictures, as well as a long list of other situations where the focus is shifted onto something in the "foreground". Before beginning this learning process, the question stood to me: How would I even begin to add an element completely covering, as well as disabling the rest of the page's function? At first I thought layering, specifically on the "z" axis, would be the best course of action, but after reading into it one option seemed to be the most simple:

The Actual(short) Process

What do we actually want to show up on our DOM? The first layer begins with taking focus off of the "body" content by darkening it, to later give the pop-up more contrast.

<body>
   <div id="blur-cover">
      <div id="pop-up">

      </div>
   </div>
</body>
Enter fullscreen mode Exit fullscreen mode

The HTML elements are not specific, just including a "div" for the blur effect, and another for the actual content; The window that will appear after clicking on an event listener.

The first styling to make the "div"s appear with a few qualities includes:

#blur-cover{
   width: 100%;
   height: 100%;
   background-color: rgba(0,0,0,0.7)
}
#pop-up{
   width: 500px;
   height: 300px;
   background-color: white;
}
Enter fullscreen mode Exit fullscreen mode

These lines will create the background blur effect, which is now just a semi-transparent "div", darkening the "div"'s background within its margins as well as a solid white "div" that's an appropriate size, all overlayed on a filler-picture to see depth:

Image description

Then comes the additional styling to place the "div"s in the correct spots:

#blur-cover{   
   width: 100%;
   height: 100%;
   background-color: rgba(0,0,0,0.7);
   position: fixed;
   top: 0;
   justify-content: center;
   align-items: center;
   display: flex;
}
#pop-up{
   width: 500px;
   height: 300px;
   background-color: white;
   border-radius: 15px;
   position: absolute;
}
Enter fullscreen mode Exit fullscreen mode

Now, the white box is in the center of the page, even while scrolling, as well as the background being a darkened version of the "body" elements. Note that the "background-color" of #blur-cover is set as "rgba" with an opacity value of 0.7. If you call the "background-color" as something like "black", then call an "opacity" of 0.7, which seems like it would work, it would then apply that transparency of 70% to all elements within its "div", including the pop-up, which we don't want.

Image description

To explain the CSS further, #blur-cover now has attributes for the following:

   top: 0;
   justify-content: center;
   align-items: center;
   display: flex;
Enter fullscreen mode Exit fullscreen mode

"top", brings the the element to start from the top of the page, "justify-content: center" horizontally aligns the child "div" to the center of the page, "align-items: center" vertically aligns its child "div" into the middle of the page. "display: flex" works hand-in-hand with the the second and third lines to center "div"s, where we commonly see those three used in combination to center elements.

The added CSS to position the #pop-up "div" is quite simple and half-aesthetic, being "border-radius", to create softer edges around the white box, and "position: absolute" to make the box static even while scrolling.

Then, we have to assign a button with an event listener to actually make the pop-up appear when clicked, as well as a way to exit out of it.

Creating the X:

<div id="pop-up">
   <div id="close">+<div>
</div>
Enter fullscreen mode Exit fullscreen mode

The "x" cannot be an actual "x" character, due to it not being symmetrical, so a "+" can be substituted, while also rotating it 45 degrees, and positioning it on the pop-up:

#close{
position: absolute;
top: 0;
cursor: pointer;
font-size: 40px;
transform: rotate(45deg);
right: 14px;
}
Enter fullscreen mode Exit fullscreen mode

Image description

Before going any further, we have to make the pop-up not visible in the default DOM by setting one more attribute to "#blur-cover":

display: none;
Enter fullscreen mode Exit fullscreen mode

This will be the premise of the event listener, where we will switch the "display" value depending on if we click the pop-up button, or the "x" button:

document.getElementById('btn').addEventListener('click', e => {
    e.preventDefault();
    document.querySelector('#blur-cover').style.display = 'flex';
})

document.querySelector('#close').addEventListener('click', e => {
    e.preventDefault();
    document.querySelector('#blur-cover').style.display = 'none';
})
Enter fullscreen mode Exit fullscreen mode

After, we create the first couples lines of JavaScript to make any button functionally make the pop-up appear.

Closing

My main goal with learning this was to improve at CSS, and this question I solved had always been in the back of my mind. Doing this also improved how I handle CSS problems, realizing that I could have done this with prior experience and knowledge if I had only thought of how to apply it. Always room for improvement. Thanks for reading!

Top comments (2)

Collapse
 
olsard profile image
olsard

Thanks for sharing.

Collapse
 
elliotmangini profile image
Elliot Mangini

Looking good, Kon!

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. 🛠