JavaScript — Building A Pop Up
This article will cover my process for building a simple pop up in a web browser. This article will cover some basic HTML and CSS in a little more depth than I have been. My intentiojn is to mostly cover JavaScript, but sometimes things entertwine a little more than I can ignore. SO! Here we go!!
First, here is a little snapshot of the final product:
The HTML:
In the body, I have a button that says “Click Me”. I have a few divs. I have all these set up this way so I can assign each of them a class. The reason for the classes is so that my CSS document can style the pop up when I click the button.
The style sheet is also being referenced in the top of the HTML doc. As you can see, each class has CSS properties. This is why the pop up is centered, and the close button is in the top right and so on.
Heres the JavaScript. The button const references the button. I have an event listener looking for a click event. When the button gets clicked, I change the style of the popup const to ‘block’. This is basically changing the CSS display property of the popup-wrapper. This makes the element visible on the screen as a block level element. That way it’ll take up the full width available and start on a new line.
As you can see in the CSS, the display property of the popup-wrapper class is set to none by default. Thats why it isn’t visible from the start.
The close const is getting the close button. When its clicked, we set the display property to none again. I also have the popup itself look for a click event to turn off the pop up as well.
Thats all there is too it!