How to create a custom alert box - with HTML, CSS & JavaScript - Web Tutorial

View the source code on CodePen:

Google Material Icons Link:

In this video we're going to be creating a custom modal window using plain HTML, CSS and JavaScript. No jQuery or external library needed! As this will be completely custom you can easily extend this code and modify it to your hearts content.

Support me on Patreon:

For your reference, check this out:

Follow me on Twitter @dcode!

If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

[angladephil]

Woaw !!! What a knowledge, analyzing, thinking and giving it to all of us. Thanks a lot, Dom !!!

[catherineragasa]

Hello! Im unsure of how to display the modal. I used the modal function in HTML but its not appearing when i run the code. Pls help

[michaldanas]

Good work, it helps me. You are good at coding :) Thanks

[tipking]

Great tutorial man, love your content.

[shahbokhari]

Dom! you took a completely different approach for creating this modal. It is exceptional! Indeed! Could you make a reusable modal tutorial, please? Thank You soo much!

[yamacode]

I really struggle with navigation on a website. Would you mind creating a number of tutorials on navigations, for example multilevel navs