DEV Community

Cover image for Custom Dialog Box Excitement
Anna Villarreal
Anna Villarreal

Posted on

Custom Dialog Box Excitement

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:

dialogbox html

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



The fun part

Add styling with CSS to customize your new box:

dialog box styling


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

  1. Create a custom function that renders the dialog box onclick in JavaScript.
  2. Create variables to define size and access elements from the DOM using an ID.
  3. 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.

custom dialog box javascript

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

custom dialog box on page

I really had fun doing this - and stayed up to late - again. XD

Top comments (2)

Collapse
 
free_programmers profile image
Free Programmers

It was a very good article.πŸ‘πŸ‘πŸ‘

Collapse
 
annavi11arrea1 profile image
Anna Villarreal

Glad you enjoyed it! :)