How to Create Simple Popup Box / Modal using HTML CSS & JavaScript

In this video I have made a simple popup box / modal using HTML CSS and JavaScript. Learn how to create simple popup Box / modal.

[tdunlavey]

Very clean solution, thanks! For anyone looking to expand functionality a bit, you can add the onclick="togglePopup()" to the overlay class to trigger closing the modal by clicking anywhere off of the popup. I also added:

document.addEventListener('keydown', function(event){
if(event.key === "Escape"){

}
});

to the JS to include the Escape key press as a method of closing the popup.

[akadwriter]

This was the video that I really needed to complete the JS on my personal site. THANK YOU SO MUCH!!

[diamondparteyh]

Thank you, used this in my first website project allthough I have no idea what 80% of the css refers to :D

[Urimemo]

Holy shit bro, u're a fucking hero!!! all the afternoon lookin' for a simple method and finally God sent me your video!!!

[CH.NOMI]

This is very helpful, I have been scrolling through the internet for two days but your video help me a lot! thank you for creating this video!

[kevindelmote]

Really good tutorial, thank you very much !!

[blackeyedincubus]

How can I center the window?

Edit: I centered the button and now the popup window appears on the left but only half of it.

[KaranKumar-rmzz]

Thankyou so much Brother It helped me alot 🔥 respect for you brother ❤️🙏

[stym-rj]

oh

finally i m able to make these popups... thanx a lot

[MrDoug]

Great job! Thank you for helping me. I was looking for a simple solution.

[nikhilmehra]

I don't have words to say, but really this video is so helpful for me
Thank you so much Brother

[specialrdm-nat]

it will be nicer if you provide us code link in description

[ojzdcvz]

complete sir thank for giving tihs informatical video, , , , this is very useful video 100/10

[irynafriaf]

Oh it’s great solution. Saved my project)) thank you

[poponpogi]

Can i use img onclick event instead of button?

[nuzhamuhammed]

Thank you, it was very helpful!
if possible, may i get the code for adding 2 pop-ups in the same page? I couldn't figure out how to do it as I'm still new to coding.

[aaronsaunders]

Is it a combo of all languages or is there a separate version in all 3 languages? I tried this. It didn’t work. 😓

[avitavdish]

the popup shows for a sec and then the site renders, how can i stop it from rendering so it will show the popup window till someone press the close btn?

[peterime]

This was very helpful. Thank you - I just subscribe

[KoOodak]

Which program are you using? Soeasy and flexible.. Great video by the way 👊🚀