Create a Modal With HTML, CSS & JavaScript 

I'm watching your crash course videos and I've learned more from those videos than I've learned from my paid Udemy course. I appreciate you.

You are truly a great teacher. You're methodical and a calm when it comes to developing; allowing us to actually learn with you. Even when things don't go the way you think, we still learn from those moments because that would be something that we may do, as well. Thank you, sir. Looking forward to more videos!

Damn Mr. Brad! It's freaking simple! I mean it can't be simpler, but your ability to organize everything and use it correctly makes your videos the best. Thank you!

This is sweet, Brad! Thank you for your time and effort creating these videos. One feature I would add to this modal - option to close it with esc key. Maybe something like this: window.addEventListener('keyup', escapeClose); function escapeClose(e) { if (e.keyCode === 27) { modal.style.display = 'none'; } }

And the hits keep coming ! WOW. Another great tutorial. Thanks Brad. Looking forward to the Javascript video.

Thank you. This tutorial simplified the modal feature. Prior, I was under the impression that it was a complicated process but now I know it's just a bunch of divs that are being displayed, hidden and styled.

You're amazing! Wonderfully clear walk-through and instruction -- you've helped me make sense of a lot of these concepts. Absolutely great find. Fully appreciative!

Going to put this right here.... didn't read the other comments... BUT, I love 19:10 "WTH" response.... I never doubted you'd figured out what was the problem. Rather, that very response EVERY programer / coder has when the thing doesn't do the thing that the thing was suppose to do is priceless! Thanks Brad! Even after five years, your work is absolutely making our profession more, exponentially. Thank you!

This channel is the only source you need to learn web development. The way the material is explained and presented is very easy to follow.

You are literally the best Web youtuber ever, every time you post a new video i Like it first then watch... :D, i bought your udemy courses too. Thank you very much for your content, never stop what you are doing! Greetings from Sweden

Dude, what a great tutorial. Thank you so much for taking the time to put this stuff out there. This is quality content. You have a way of explaining web development that makes it easy to understand. That's very refreshing after watching some of the other poorly constructed tutorials on youtube. I built this for a site I am working on.

You are the best, man. It's not just that you explain how to make a modal. It's the way you explain it. Thank you.

I have seen so many tutorials on RU-vid but Travesty is one of the best... That is because the content and style of teaching is so unique, pace of learning is also perfect and overall you make it look so simple...... Thank you so much from India

Traversy, thank you very much for the content that you continue to share with us, I appreciate a lot and greetings from Tanzania!

You're amazing, dude. It seems like every day there's a new (and usually very relevant) tutorial to watch. Keep it up!

I've visited a lot of tutorials just to find out how to do what you just did and none of them were worthy just time wasting. Oh man!!! you're a life saver. *****Keep up the good work*****

Clearly explained concept and application, excellent presentation.

i like it a lot brad! it's so much cleaner than most of the no-framework modals that i saw on codepen.. :) thanks

i love the way you teach the codes. its very organized making it very easy to understand the logic of your codes. keep it up. we are watching...

6 years later and this is still very relevant and helpful... Thank you

Thank you; that was really useful. Just made my first card game with JavaScript and was looking for a kind of pop up box (didn't know they were called modals) to explain the particular rules of the game. Took a while to understand everything but really glad I can add this to the game now;

I have created a few modals in the past - in the 'dark' by copying code from W3 and other places - this is very useful because now I understand how it works. GREAT STUFF BRAD!

Thank you so much for having that mistake in targeting an Id instead of Class...As someone still fairly new, there is nothing worse then when the FEW areas I feel I do understand, suddenly dont function. Always because of an error like that but, watching you mumble to yourself left this viewer quite amused/reassured. Love all the videos!

Love your vids Brad ... Clear, precise and fun ... Cheers to you and yours

Awesome tutorial. Great job explaining things that we might not know. Love it

Thank you! I liked the pace and I enjoyed watching you trouble shoot a couple of small items. It did seem like you coded this as you went and it is important to see how to see how to find and squash bugs. Some you tubers never show their mistakes and their videos are 100% scripted.

Great job with the video. It helped to reinforce some styling techniques in CSS and the end result looks really professional

Com o pouco que entendo de inglês e observando o código, achei um aprendizado incrível. Good Work man

My gratitude to you for all you courses on RU-vid and Udemy. Truly, it helped me a lot.

Great video as usual. A good mix of HTML, CSS and JS. Nice one Brad!

Traversy media is the most channel that learning IT . I watch your lessons on you tube from Uzbekistan

Wish I found this video hours ago! You made this concept so simple, thank you!

Thanks, I had already created a modal, but wasn't sure how to move it as it was staying at the top of the screen. This tutorial really helped with that :)

Your tutorial was very clear and easy to understand with lots of good explanations. Thank you!

Brad Traversy the real developer over there... God Bless You Sir...

nice tutorial Brad, as always, thanks a lot., the only thing i would recommend is to use tag for closeBtn, instead of tag...

Much more elaborate than the tutorial in your Bootstrap udemy course. It's amazing that a free content is better than paid one!

Thanks Brad. Super easy I REALLY ENJOYED IT! Thanks

Great stuff man, very informative. I was trying to create a modal that included a Fareharbor script for a ticketing system and it worked perfectly. The only thing I wish I could have done would be to have been able to use the button class as a modal itself so I didnt have to change multiple pages of code.

As always a simple but useful video. That's why I support you!

I'm 19 and a novice programmer. Your videos ROCK! best one out there

Hello Brad! You are one of the best youtube teachers! Only a few people here, on youtube, have that level of proficiency like you! You have a lot of videos which I didn't watch yet, but hopefully I will! People can learn a lot from you! My suggestion is that you could put more JavaScript cardio videos! I have a question about this video here... Why did you use both hover and focus on closeBtn class? Wasn't enough to use only hover here?

thank traversy your courses are awesome and clear its make learning so much easier thanks alot

thank you my friend!! helped me with my project work!

I recently started freeCodeCamp to get into web design and while I feel like they give you a good structure and at least give you projects to assign yourself too, people like you teach me more useful information like this that makes me go "Oh I can add that to my project!" Right now I've got to design a portfolio and I've saved a few of your videos to guide me. I think I might use this modal as a cool contact form (as the project requires that all content be accessible on one page). So I think a fixed Navbar at the top of the screen with a menu item to call a Modal with a contact form in would be a cool way to use this. Soon as I've got some spare income going I'll be supporting on Patreon :)

Some of the clearest explanations out there.

first person on youtube who is really convincing me that its a deal to get those 21h courses on udemy! You helped me very hard with your crash courses!

Thank you so much for this video, definitely gave me allot of new ideas and perspectives. :)

I know this is an old video but thank you very much. Very simple to follow and build.

Every video u upload is so nice, thanks to u Brad u make me learn a lot in very easiest way

Great video, super easy to follow and understand thank you so much!!

I wish I had the money to give you as your content is excellent - maybe if I keep watching Ill learn enough for that to change and I can hit up your patreon page! Thanks for you work man!

thank you alot for your time and contribution to teach the community Brad, you are awesome! anyway, since recently you make alot vanilla javascript screencast, would you please teach css in js ?

Simple & helpful. Thank you very much!

Here's a nifty tip to go along with it, if your close button doesn't seem to be lining up with your modal-header text. In the CSS adjust the line height of the close button to match the modal-header's content height. You can find the content height by inspecting the element in chrome developer tools. This is the height minus padding, margins and borders. It Looks like line-height: 40px; did the trick. But if you have variations from the tutorial you'll have to use inspect element to match the x line-height to the modal-header content-height to compensate for any size/font changes you may have made. :D

6 year old tutorial and still very helpful today, thank you!

Man you are awesome, thanks for teach me how to create a modal using javascript, this is a good tutorial i give "like".

Awesome stuff!

Your videos are very helpful for me to understand HTML CSS and JAVASCRIPT.. keep it up and upload more video..:)

You are a beacon of light Brad!

What a clear explanation. Great!

you are a genius keep it up boss

Excellent explanation!! Thank you very much

Really helpful content. Thank you Brad!

how to open multiple modal boxes in same page if there are more number of buttons?

Insanely helpful, thank you.

you are the best bro!!! I'm italian and your english is very fine!

Freakin LOVED this Vid!!

Another useful application. Thank you again Brad.

Great vid Brad. really enjoyed it

Hey Brad, thanks for all your videos, they're really helpful. I have a quick question, how do I implement this if I want to use modals in a portfolio gallery? I should get the element by class rather than id, right? because if I give the same id to all the elements it just works on the first picture of the portfolio.

Awesome as always .. :) Please make a video on multiple files/images with preview upload in pure JavaScript without using 3rd party library

Hi Brad ,I watch you video everyday and learn new things every day through you videos.I am beginner and fully focus on web development ,so I learn web design through you videos.Now I focus on client side programming and server side programming with database. So i request to you make project a fully functional website with client side programming ,server side programming with database.

Nice one. Thanks Brad

Used this tutorial to build a modal using tailwind css thanks !

Excellent discussion, very nice.

Watching that kind of videos is such a big deal. Tip: when Brad makes an Error (probably intentionally) it's better to pause and try to solve it yourself before him. I think this can help you learn way more better than waiting for solution. Good luck.

As usual Awesome content! cheers!

Nice tut Brad. im tight on cash rite now but im looking forward to the udemy courses you offer.. Thanks again bud and keep em coming.

Brad, these videos are a life saver. I also follow your vids on Udemy...

Best web develop channel in RU-vid. Greeting from edTech startup YouthInventor ;)

best tutorial to start creating modals

Thanks buddy, very helpful.

Please make more videos of this kind... It is very helpfull :)

Brad, love watching your videos and learning these magical tricks. It's the only thing that keeps me sane out here in very rural NE Thailand. Javascript is easier to learn the Thai/Laos/Khmer 8-) As with Denis Soll, how do you make it fade out please? Farm West

Very good ! subscribed !

Thanks for this tutorial!

people like you are the reason i never give up, best teacher ever! :)

Very nice! Thanks a lot!

Awesome. JavaScript is finally making friends with me now. Lol. Thanks Brad.

Thank you for this tutorial, se need more vanilla JavaScript. Frameworks help, but first we have to learn JavaScript.

one of the best tutorial. You are awesome ❤❤❤

We enjoyed you do not worry about it :)

You are amazing. Thank you for the video.

Thank you so much, This is a great content

THANKS FOR THE TUTORIAL

:-) Thank You very much for explaining css and js in such detail. I love this feeling so much, when I understand all this!!! :-) ???? The structure of the modal window is always written at the bottom of the page before the script and ??

Thanks i learned many things with you

Very informative vids, thanks!! Question though, if you want multiple buttons opening Modals with different text in them, I assume you can just give them a different ID's but then would you also need to have multiple iterations of the CSS and JS, one for each Modal?

Awesome ! as always