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.
Awesomeness - Give it a try
I really had fun doing this - and stayed up to late - again. XD
Top comments (2)
It was a very good article.👍👍👍
Glad you enjoyed it! :)