Creating Annoying Popups Part 1

John Ross Valderama — Thu, 02 Feb 2023 02:44:56 +0000

I've seen a few tutorial videos on web development, so I'm hooked. But I'm in a place that developers call tutorial hell. Tutorial limbo? Regardless, it's a bad place to be. So I'll need to start working on some projects to see if I can:

Recall
Understand
Apply

If I can get through this, I'll be officially out of tutorial limbo.

First thing first, let's set up the HTML boilerplate.

Next, let's make it look pretty, so people will be more willing to sell us their souls.

Set the site aesthetics

During the setup of the page's colors, I wanted to try having a lighter background, so I found a CSS property that would have a way to adjust the transparency of a color. The first property I saw was opacity, but this did too much. Not only did it change the background's transparency, but everything in the container did.

The second was rgba. This had a fourth value, alpha that set the transparency of the text from 0 to 1. I finally sat at 0.6 for the final value.

Setup the Portal of Souls

Currently, the layout isn't annoying; the popup is at the bottom of the page, and it needs to be in the middle so that viewers can only view the content if they sell their souls. To do that, we'll need to make some classes for the popup. The particular property it'll have will be position: fixed. This will remove the popup from the flow and set it to a fixed position on the page. Hence the name "fixed."

.pop-up {
    position: fixed;
}

Currently, there is no effect on the popup, but if we add the following properties: top, right, bottom, left, we can set the position of the popup. You'll only need to use one horizontal and one vertical property. Using all four won't affect the positioning but will have other unintended circumstances.

.pop-up {
    position: fixed;
    top: 500px;
    bottom: 500px;
}

There is an issue when setting pixels. There will be a point when you resize the window that the popup will disappear. We don't want free souls looking at our content. We'll need to make it, so the popup stays in the middle of the page. This can be done by setting the top, bottom, left, right properties to 0 and adding the margin property, and putting it to auto will have the popup stay in the center regardless of the size of the window.

.pop-up {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

Alright, this is pretty triggering. In part 2, we'll review some javascript to make the site interactive by adding some buttons and making the popup appear a few seconds after the viewer has tasted the content; then, we'll steal their soul!

DEV Community: John Ross Valderama

Creating Annoying Popups Part 1

Set the site aesthetics

Setup the Portal of Souls