Create a Modal With HTML, CSS & JavaScript
ฝัง
- เผยแพร่เมื่อ 28 ก.ค. 2024
- In this video we will be creating a modal from scratch using HTML, CSS and JavaScript. You see these a lot with frameworks like Bootstrap but here we will create our own custom modal.
CODE: Code for this video
codepen.io/bradtraversy/pen/z...
BECOME A PATRON: Show support & get perks!
/ traversymedia
ONE TIME DONATIONS:
www.paypal.me/traversymedia
FOLLOW TRAVERSY MEDIA:
www.traversymedia.com
/ traversymedia
/ traversymedia
/ traversymedia
COURSES & MORE INFO:
www.traversymedia.com
NEW DISCORD CHAT SERVER:
/ discord - วิทยาศาสตร์และเทคโนโลยี
![เบิ้ล ปทุมราช - อ้ายกินดอง น้องลาบงัว ft. สแน็ก อัจฉรีย์ [OFFICIAL MV]](http://i.ytimg.com/vi/-OK--KaSPcI/mqdefault.jpg)
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!
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!
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.
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 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';
}
}
Like this ... I added it to my main.js ... thanks Davis.
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 the best, man. It's not just that you explain how to make a modal. It's the way you explain it. Thank you.
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
Thank you, that means a lot :)
I hope to see some wordpress courses (like build a theme from scratch) on udemy soon, would be more then glad to buy them :)!!
the wordpress courses with building a theme from scratch would also be interesting to me
Traversy, thank you very much for the content that you continue to share with us, I appreciate a lot and greetings from Tanzania!
I have seen so many tutorials on TH-cam 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
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.
Yes OwO
Clearly explained concept and application, excellent presentation.
Awesome tutorial. Great job explaining things that we might not know. Love it
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*****
Wish I found this video hours ago! You made this concept so simple, thank you!
Great video as usual. A good mix of HTML, CSS and JS. Nice one Brad!
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!
i like it a lot brad! it's so much cleaner than most of the no-framework modals that i saw on codepen.. :) thanks
Love your vids Brad ... Clear, precise and fun ... Cheers to you and yours
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;
Com o pouco que entendo de inglês e observando o código, achei um aprendizado incrível. Good Work man
Brad Traversy the real developer over there...
God Bless You Sir...
Great job with the video. It helped to reinforce some styling techniques in CSS and the end result looks really professional
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! 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.
Much more elaborate than the tutorial in your Bootstrap udemy course. It's amazing that a free content is better than paid one!
nice tutorial Brad, as always, thanks a lot., the only thing i would recommend is to use tag for closeBtn, instead of tag...
My gratitude to you for all you courses on TH-cam and Udemy. Truly, it helped me a lot.
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 :)
thank you my friend!! helped me with my project work!
Thanks Brad. Super easy I REALLY ENJOYED IT! Thanks
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 :)
I'm 19 and a novice programmer. Your videos ROCK! best one out there
As always a simple but useful video. That's why I support you!
thank traversy your courses are awesome and clear its make learning so much easier thanks alot
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!
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
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.
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?
Some of the clearest explanations out there.
how to open multiple modal boxes in same page if there are more number of buttons?
i also need to know how to do this haha
have you figured out yet?
Maria de Campos No, not yet, i gave up
I actually figured it out!!
here's the link that helped me solve it :) (it's the third and last answer, by Denis Mysenko)
stackoverflow.com/questions/40645032/creating-multiple-modals-on-a-single-page
simply create objects on an array, walk around that path.
Thank you so much for this video, definitely gave me allot of new ideas and perspectives. :)
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.
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.
Traversy media is the most channel that learning IT . I watch your lessons on you tube from Uzbekistan
Simple & helpful. Thank you very 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!
Your tutorial was very clear and easy to understand with lots of good explanations. Thank you!
Awesome stuff!
You are a beacon of light Brad!
Man you are awesome, thanks for teach me how to create a modal using javascript, this is a good tutorial i give "like".
Every video u upload is so nice, thanks to u Brad u make me learn a lot in very easiest way
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 ?
you are the best bro!!! I'm italian and your english is very fine!
you are a genius
keep it up boss
Excellent explanation!!
Thank you very much
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.
Your videos are very helpful for me to understand HTML CSS and JAVASCRIPT.. keep it up and upload more video..:)
Great video, super easy to follow and understand thank you so much!!
Awesome as always .. :)
Please make a video on multiple files/images with preview upload in pure JavaScript without using 3rd party library
Really helpful content. Thank you Brad!
Great vid Brad. really enjoyed it
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?
I know this is an old video but thank you very much. Very simple to follow and build.
Another useful application. Thank you again Brad.
Insanely helpful, thank you.
What a clear explanation. Great!
Freakin LOVED this Vid!!
Used this tutorial to build a modal using tailwind css thanks !
6 year old tutorial and still very helpful today, thank you!
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.
best tutorial to start creating modals
Brad, these videos are a life saver. I also follow your vids on Udemy...
Thanks for your all work, highly appreciate, regarding this video, if more than 1 popup box /model created the second one have all attributes while the first one could not close while clicking outside the box; mean if 5 created, fifth can be closed while clicking outside but 1 to 4 not closed while clicking out side; any suggestion; thanks
Excellent discussion, very nice.
people like you are the reason i never give up, best teacher ever! :)
Awesome :)
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.
Great tut. Question how could I adjust this js to use multiple modal buttons?
Got a question regarding this project. Great video btw. If I had a bunch of buttons with a bunch of modals but no database (mongodb, sql) to connect to would I be using an array of modal objects and iterate through them with a loop to pull the relevant modal window for the particular button pressed? Does my thinking of how that would work sound alright? Thanks in advance.
Thank you so much, This is a great content
How can i close modal with animation? And how to close modal when click outside the modal (on dark background)
I was going to say add the reverse (i.e. animation-name: modalclose; animation-duration: 1s; and @keyframes modalclose { from{opacity: 1} to{opacity: 0}
.... but that does not work properly. So therefore I will shut up, make a cup of tea and hope Brad can answer it as I'm interested too. :-)
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
Thanks buddy, very helpful.
Can we add transition on it so this will comes from top as like it's working in Bootstrap?
As usual Awesome content! cheers!
thank you so much. one question tho. how can i duplicate it? like to have many of this!
How do you make it so that you can open other modals using the button with the same id?
Hey man I need help, how can I link my Instagram page into the modal? I tried but it's like it doesn't read it, and it leaves a white space under the other text
Nice one. Thanks Brad
great vid my modal game is improving! My only suggestion would be to use jquery over standard Javascript :)
Thanks, Traversy I'm having a small problem though... How do I prevent the modal from opening when a page loads up?
how do you do a auto size inside of your modal? or is there another way of displaying it?
Great tutorials... Just wondering do you have any on creating comment boxes for a web page?