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>

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;
}

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:

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;
}

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.

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

   top: 0;
   justify-content: center;
   align-items: center;
   display: flex;

"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>

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;
}

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;

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';
})

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!

Blog

Konstantin Stanmeyer

The Actual(short) Process

Closing

Join Our Newsletter. No Spam, Only the good stuff.

Related