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'; } }
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!
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. 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 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!
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*****
I have seen so many tutorials on UA-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
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!
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
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!
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.
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 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 :)
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.
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 :)
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!
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.
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?
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.
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.
If you want the modal to do a fade transition when exiting it, you can use setTimeout in the javascript. Put this in both of the exit listeners... modal.style.opacity = '0'; setTimeout(() => { modal.style.visibility = 'hidden'; }, 300); Change the milliseconds (second parameter) in setTimeout to your desired speed; the seconds should be the same as on the modal transition property. Make sure to remove the display property in your css, and use visibility instead. Demo: codepen.io/alex-sir/pen/WBJXrN
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!
I have serious problem with nested tags. I mean, why do we have so deep tags wrapping around our things. Is there a rule of thumb to know how deep we should nest our tags. Is there anyone who knows how to organize divs enlighten me please!
Thanks to Brad. (Years later!) I would prefer that the outside click does not close the modal. I do not know what is considered "best practices" for UI regarding this.
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 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 ??
I really appreciated the video above, it was very useful. Just one question: what if I need to replicate the modal (with different contents) for other buttons?
Hi Brad. Question. What if i had multiple buttons which, when clicked displayed modals with different contenta, all on the same page. How would I go about that?
@@santoshnair5884 man can you please help me out, I don't know why the link I put into the modal don't work, won't work, it doesn't even show it when I upload the page
@@Lorenzo-yk8qv Not sure what you're trying to do. You can't make everything work with html and css here. You can have multiple modals under seperate divs and use javascript to open that particular div/modal
Great tutorial!!!!!!!!!!!!!! well explained! Only 1 con: Video duration 31:26 is kinda too long for this subject! (I'm a beginner and i was just skipping many parts and still was able to understand)
If you would like to open multiple modals on the same page: Change the CSS button class name in HTML and CSS to `modalBtn` or what ever you want to use, make sure to change the pseudo classes as well. Then in JS reference that class using a nodeSelector like querySelectorAll(). You will need to change all your document.selectors from IDs to querySelectorAll(), so the _'modal', '.modalBtn' and '.closeBtn'. Now because these are NodeLists, you'll need to reference the key using a forEach() loop. Example: "modalBtn.forEach((el, i) => { el.addEventListener('click', () => { modal[i].style.display = 'block'; }) })". This will need to be repeated for the closeBtn as well. Then in the window event listener function that handles the click outside, wrap the conditional that checks the event target in a modal.forEach() loop and use the `currentValue` to style the display. Example: "modal.forEach((el) => { if(e.target == el){ el.style.display = 'none'; } }) }"
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 ?
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
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.
Hi Brad, thank you for your video. I have a question about modal, say I have a log table and the input just show on the page when you open the webpage, if I want to hide the input/string from a cell of that table and change it into a modal button, what types of instructional video i should search for?
This is the second video from you that has helped me a ton. Question though, how do you create multiple button modals that work with DISTINCT content. I figured out how to do the different buttons with the arrays...but every time I use them I get the SAME text from one of the button's content (for both buttons). How do I correct that? ANY help would be appreciated...I have read and researched for hours with no real help.
Will the Udemy course for vanilla javascript be more in depth than your vanilla javascript playlist on youtube? I'm just curious, because if it is, I'll definitely be buying it. I got the Udemy JS course done by Johann something but he's painful to listen to, he knows what he's doing, but he talks so slow!
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.
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.
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!
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 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
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.
6 years later and this is still very relevant and helpful... Thank you
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 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!
Brad Traversy the real developer over there...
God Bless You Sir...
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*****
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.
Traversy media is the most channel that learning IT . I watch your lessons on you tube from Uzbekistan
I have seen so many tutorials on UA-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
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!
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
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!
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
I'm 19 and a novice programmer. Your videos ROCK! best one out there
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;
And the hits keep coming ! WOW. Another great tutorial. Thanks Brad. Looking forward to the Javascript video.
Much more elaborate than the tutorial in your Bootstrap udemy course. It's amazing that a free content is better than paid one!
Traversy, thank you very much for the content that you continue to share with us, I appreciate a lot and greetings from Tanzania!
6 year old tutorial and still very helpful today, thank you!
Your tutorial was very clear and easy to understand with lots of good explanations. Thank you!
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 :)
You're amazing, dude. It seems like every day there's a new (and usually very relevant) tutorial to watch. Keep it up!
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...
nice tutorial Brad, as always, thanks a lot., the only thing i would recommend is to use tag for closeBtn, instead of tag...
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.
My gratitude to you for all you courses on UA-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 :)
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!
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.
Clearly explained concept and application, excellent presentation.
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?
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.
A very thorough tutorial on how to handcraft a modal in vanilla JavaScript. Thanks, Brad
{2021-09-02}, {2024-03-21}
i like it a lot brad! it's so much cleaner than most of the no-framework modals that i saw on codepen.. :) thanks
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.
If you want the modal to do a fade transition when exiting it, you can use setTimeout in the javascript. Put this in both of the exit listeners...
modal.style.opacity = '0';
setTimeout(() => {
modal.style.visibility = 'hidden';
}, 300);
Change the milliseconds (second parameter) in setTimeout to your desired speed; the seconds should be the same as on the modal transition property. Make sure to remove the display property in your css, and use visibility instead.
Demo: codepen.io/alex-sir/pen/WBJXrN
I know this is an old video but thank you very much. Very simple to follow and build.
Some of the clearest explanations out there.
You are a beacon of light Brad!
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!
you are a genius
keep it up boss
Wish I found this video hours ago! You made this concept so simple, thank you!
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
I have serious problem with nested tags. I mean, why do we have so deep tags wrapping around our things. Is there a rule of thumb to know how deep we should nest our tags. Is there anyone who knows how to organize divs enlighten me please!
Thanks to Brad. (Years later!) I would prefer that the outside click does not close the modal. I do not know what is considered "best practices" for UI regarding this.
Com o pouco que entendo de inglês e observando o código, achei um aprendizado incrível. Good Work man
best tutorial to start creating modals
Best web develop channel in UA-cam. Greeting from edTech startup YouthInventor ;)
What a clear explanation. Great!
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!
Great job with the video. It helped to reinforce some styling techniques in CSS and the end result looks really professional
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
thank you my friend!! helped me with my project work!
Man you are awesome, thanks for teach me how to create a modal using javascript, this is a good tutorial i give "like".
Great video, super easy to follow and understand thank you so much!!
We enjoyed you do not worry about it :)
people like you are the reason i never give up, best teacher ever! :)
Awesome :)
:-) 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 ??
Great video as usual. A good mix of HTML, CSS and JS. Nice one Brad!
I really appreciated the video above, it was very useful. Just one question: what if I need to replicate the modal (with different contents) for other buttons?
Brad, these videos are a life saver. I also follow your vids on Udemy...
Used this tutorial to build a modal using tailwind css thanks !
Awesome. JavaScript is finally making friends with me now. Lol. Thanks Brad.
Thanks Brad. Super easy I REALLY ENJOYED IT! Thanks
Hi Brad. Question. What if i had multiple buttons which, when clicked displayed modals with different contenta, all on the same page. How would I go about that?
I have this question too. Probably a simple answer, but I can't find it.
Create multiple modals one below the other and use javascript to display that particular model on click, based on your javascript logic
@@santoshnair5884 man can you please help me out, I don't know why the link I put into the modal don't work,
won't work, it doesn't even show it when I upload the page
@@Lorenzo-yk8qv Not sure what you're trying to do. You can't make everything work with html and css here. You can have multiple modals under seperate divs and use javascript to open that particular div/modal
@@santoshnair5884 no it's something way more simple, just trying to put my Instagram account into the modal box
Your videos are very helpful for me to understand HTML CSS and JAVASCRIPT.. keep it up and upload more video..:)
Every video u upload is so nice, thanks to u Brad u make me learn a lot in very easiest way
Great tutorial!!!!!!!!!!!!!! well explained! Only 1 con: Video duration 31:26 is kinda too long for this subject! (I'm a beginner and i was just skipping many parts and still was able to understand)
Another useful application. Thank you again Brad.
Please make more videos of this kind...
It is very helpfull :)
Great vid Brad. really enjoyed it
Really helpful content. Thank you Brad!
If you would like to open multiple modals on the same page:
Change the CSS button class name in HTML and CSS to `modalBtn` or what ever you want to use, make sure to change the pseudo classes as well. Then in JS reference that class using a nodeSelector like querySelectorAll(). You will need to change all your document.selectors from IDs to querySelectorAll(), so the _'modal', '.modalBtn' and '.closeBtn'. Now because these are NodeLists, you'll need to reference the key using a forEach() loop. Example: "modalBtn.forEach((el, i) => { el.addEventListener('click', () => { modal[i].style.display = 'block'; }) })". This will need to be repeated for the closeBtn as well. Then in the window event listener function that handles the click outside, wrap the conditional that checks the event target in a modal.forEach() loop and use the `currentValue` to style the display. Example: "modal.forEach((el) => { if(e.target == el){ el.style.display = 'none'; } }) }"
The best. your teaching is the best.
Awesome stuff!
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 ?
dude you're a legend
you are the best bro!!! I'm italian and your english is very fine!
Excellent discussion, very nice.
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
nice Sir.. A lot of love from Pakistan
one of the best tutorial. You are awesome ❤❤❤
Simple & helpful. Thank you very much!
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.
You explain so well
Awesome as always .. :)
Please make a video on multiple files/images with preview upload in pure JavaScript without using 3rd party library
Hi Brad, thank you for your video. I have a question about modal, say I have a log table and the input just show on the page when you open the webpage, if I want to hide the input/string from a cell of that table and change it into a modal button, what types of instructional video i should search for?
This is the second video from you that has helped me a ton. Question though, how do you create multiple button modals that work with DISTINCT content. I figured out how to do the different buttons with the arrays...but every time I use them I get the SAME text from one of the button's content (for both buttons). How do I correct that?
ANY help would be appreciated...I have read and researched for hours with no real help.
Will the Udemy course for vanilla javascript be more in depth than your vanilla javascript playlist on youtube? I'm just curious, because if it is, I'll definitely be buying it. I got the Udemy JS course done by Johann something but he's painful to listen to, he knows what he's doing, but he talks so slow!
Nice one. Thanks Brad
great vid my modal game is improving! My only suggestion would be to use jquery over standard Javascript :)
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.
Excellent explanation!!
Thank you very much