Custom Dialog Box Excitement

#womenintech #javascript #css #frontend

Of course we have to have a custom dialog box! How fun is that?

I watched this video for those who are interested and was able to handle the process fairly easily.

How it was done

First, we create a structure in the html.
We can use an overlay to block out the background when it pops up. We also need to create a box with more elements inside it. Here is a way to do that:

Also notice the button that was added with an onclick event.

The fun part

Add styling with CSS to customize your new box:

It was very exciting to create my very own dialog box. I love messing with buttons, colors, and shapes. I'm very happy I took the time to figure it out. It is a fun mini project!

Set up Functionality

Create a custom function that renders the dialog box onclick in JavaScript.
Create variables to define size and access elements from the DOM using an ID.
Once we have grabbed our box elements, we can center our dialog box that pops up by using the window width as a reference, divided by 2.

This dialog box has three areas, but you can add or subtract things as needed. The real hurdle here is function.

Add information to the box dynamically by using .innerHTML on each unique ID.
this.render will render the information onclick.
alert.render is invoked onclick which triggers the customAlert function.

The this.ok function makes sure the overlay and dialog box are being removed when the button in the "pop-up" box is clicked. We definitely need that. This is done by setting the style on both of those to none.