Not every programmer knows how to teach, so when I come across someone who does it really good like you do, I have to let them know! Thank you very much
Dude...the way you "speak" of the elements to be "alive" and talking to each other makes this even better to understand than any other tutorial i've ever seen. The parent talks to the child...works for m!
Brilliant Richard.. It's been several months that I have watched any video at normal speed. Especially liked how you explained the code rather than just writing it.. Thank you.
Great Tutorial! Very nicely done and clear - Note: for the JQuery users out there the button code would look something like this (depending on your class and id names) : $(document).ready(function(){ // Change modal background from none to flex to show it $('#modal-button').click(function(){ $('.bg-modal').css('display', 'flex'); }); // Change modal backround to none to hide it when x gets clicked $('.modal-close').click(function(){ $('.bg-modal').css('display', 'none'); }); });
Richard, thank you so much, I'm JUST getting into javascript and so far it's been a tremendous struggle! I've been through a dozen tutorials on youtube and wasn't able to get this to work. I managed to get your tutorial working after figuring out where to put the link to the javascript file. I've seen some links in the head of the html file and some at the bottom of the html body, so never knew exactly where to put it. It works at the bottom of the body tags in the html though!! Thank you so much!!!
Glad to help. The rule is to put at the bottom. This is because the page loads top to bottom. So if the html element you want to manipulate with JavaScript hasn’t loaded yet it won’t work. This would be the case if JavaScript came before html.
bro i swear in just a few words, youve taught me javascript out of all the tutorials i watched, this was the most explanatory one, never new document meant look on page and the way you explained it i fell now i can go code anything i want
I soo much loved this video... watched lots of popup videos on TH-cam on how to create popups but I couldn't understand them... but when I watched this I got it thanks men✊
Still watching your videos after 6 years, can't able to find a better lecture than this. A request to you pls make a video on how to make multiple items scrolling horizontally using javascript. 😍. Thanks man
you are just awsome man.Thank you so much,today i got a clear vision of what happens when you have more than one position="relative" ,stuff on board.Now i'm clear that position="absolute" chooses the nearest parent with relative position tag.Thank you again.Lots of love from INDIA
Thank you so much Richard! it was my first javascript. I have seen tons of analogous video here in Russia but no one was as simple and understandable as yours. Though I had some issues, it seems you haven't explained styles for 'button'. But it was minor remark, solved quickly. Overall very helpful video. Thanks again.
Thank you so much!! I've been looking for a video like yours! And the way you desrcibed JavaScript was splendid and was easily understandable, thank you thank you!!
You sir are an amazing teacher!! First time I watched a video of yours, and I really like your teaching style of explaining how all the moving parts work togther to create the finished result. I really needed to hear this at a time when I also need to create a pop up contact form on a client's website, I am working, and this video will be of incredible help to me when I start coding it tommrow. Thank you Richard.
I watch plenty of those videos since i'm learning and i find better half of them hot garbage since people don't explain stuff well, they just do it. You did a great job explaining simple things that might be not that simple for someone who is learning and might not know all of even the most basic things. Great job man. Like and sub, keep up the great work!
I have a problem... when I try to do the first JavaScript function, it just opens the login bg-modal for an instant, an then it hides again. any solution? :c
The same thing happened to me, did you surround your submit button within a form? Because when I took it out of the form and took out the submit type for the button it worked. It must be something to do with the HTML request associated with the button refreshing the page I assume.
Thank you so much Richard!! This helped a lot!! However I am confused(I am a beginner at JS) how did you run the js file with no includes? everything works except for that
I know this reply may be a little late but it may help someone else add this before the body tag so that javascript can be able to affect all the elements
I've got a one question. For example, imagine a human, who is disabled (have a bad sight or cannot use mouse) and they are using a key board. When button "click me" will be focused and enter will be clicked, our pop-up will be shown. So the question is, how will those people interact with our pop-up, if other buttons also will be available? Is there any ways to make other interactive elements unavailable when pop-up is shown?
Learn to make a mobile responsive menu - th-cam.com/video/VMxP9PMSOYM/w-d-xo.html
Judul Video Bahasa Indonesia?
Good stuff
Not every programmer knows how to teach, so when I come across someone who does it really good like you do, I have to let them know! Thank you very much
Dude...the way you "speak" of the elements to be "alive" and talking to each other makes this even better to understand than any other tutorial i've ever seen. The parent talks to the child...works for m!
Thanks man, Yeah I think teachers can get too far removed from the student, you need to have empathy and understanding of your student. thanks mate.
Great job Richard, very helpful
Traversy Media thanks brad. You’re an inspiration.
O
@richardcodes and @traversy good job for helping me out
from the master himself
Traversy Media thanks brad. You’re an inspiration.
Brilliant Richard..
It's been several months that I have watched any video at normal speed.
Especially liked how you explained the code rather than just writing it..
Thank you.
It’s amazing the fact you actually tell us what the code does makes us actually understand it
Great Tutorial! Very nicely done and clear - Note: for the JQuery users out there the button code would look something like this (depending on your class and id names) :
$(document).ready(function(){
// Change modal background from none to flex to show it
$('#modal-button').click(function(){
$('.bg-modal').css('display', 'flex');
});
// Change modal backround to none to hide it when x gets clicked
$('.modal-close').click(function(){
$('.bg-modal').css('display', 'none');
});
});
thank you
Richard, thank you so much, I'm JUST getting into javascript and so far it's been a tremendous struggle! I've been through a dozen tutorials on youtube and wasn't able to get this to work. I managed to get your tutorial working after figuring out where to put the link to the javascript file. I've seen some links in the head of the html file and some at the bottom of the html body, so never knew exactly where to put it. It works at the bottom of the body tags in the html though!! Thank you so much!!!
Glad to help. The rule is to put at the bottom.
This is because the page loads top to bottom. So if the html element you want to manipulate with JavaScript hasn’t loaded yet it won’t work.
This would be the case if JavaScript came before html.
Finally, instructions for a simple modal clear and to the point. Thanks great tutorial.
bro i swear in just a few words, youve taught me javascript out of all the tutorials i watched, this was the most explanatory one, never new document meant look on page and the way you explained it i fell now i can go code anything i want
Thanks for the kind words, glad I could help mate. Javascript is a real mother. Still it kicks my ass every day. Just keep going mate.
What a fantastic lil' video! One of the best I've watched on coding in a long time, maybe ever. Thanks!
Love the wonderful popup contact form. Help me out a lot. Thank you RichardCodes!
omg, I have to say the best coding-teaching video ever. Please keep doing this, I need more, Thank you very much
Best Tutorial and the best teacher.
I soo much loved this video... watched lots of popup videos on TH-cam on how to create popups but I couldn't understand them... but when I watched this I got it thanks men✊
WoW! This is apt. You are a great teacher. Thanks a million Richard.
I will recommend you to use position : fixed in place of position: absolute; with z-index: 2;
Example-
.bg-modal {
Position: fixed;
Z-index: 2;
}
bro any suggestion I can open my modal only in one button other buttons with the same id will not trigger the modal. thanks!
@@devbytoast I'm stuck there too. Did you find the solution by any chance?
You should come back to making tutorials! You’re great at them!
your wish is my command, I'm back
Still watching your videos after 6 years, can't able to find a better lecture than this. A request to you pls make a video on how to make multiple items scrolling horizontally using javascript. 😍. Thanks man
you are just awsome man.Thank you so much,today i got a clear vision of what happens when you have more than one position="relative" ,stuff on board.Now i'm clear that position="absolute" chooses the nearest parent with relative position tag.Thank you again.Lots of love from INDIA
Where are you man? Come back! You're awesome.
so much love man..!! You made my day.!!! :)
Thank you so much Richard! it was my first javascript. I have seen tons of analogous video here in Russia but no one was as simple and understandable as yours. Though I had some issues, it seems you haven't explained styles for 'button'. But it was minor remark, solved quickly. Overall very helpful video. Thanks again.
You are a very good teacher, you explain things clearly ! Thank you for this :)
This video pumped my project a lot! It was the base for all the popups that i'll need! Thanks a lot my dear sir!
omg!! wt an explanation dear.I became ur fan. Add more n more videos.
Thank you so much!! I've been looking for a video like yours! And the way you desrcibed JavaScript was splendid and was easily understandable, thank you thank you!!
It helped me a lot. I subscribed to your channel the moment you showed that modal
You sir are an amazing teacher!! First time I watched a video of yours, and I really like your teaching style of explaining how all the moving parts work togther to create the finished result. I really needed to hear this at a time when I also need to create a pop up contact form on a client's website, I am working, and this video will be of incredible help to me when I start coding it tommrow. Thank you Richard.
Awesome. Thanks for watching. Good luck man.
Great work buddy
Your video is truly clear my dot when I work on it.
5 minutes in just wanna say you are an AMAZING teacher thank you so much
I just didn't learn about making this awesome modal popup but I also got a lot from the css part of this tutorial. Thank you very much!
the margin between the input tags not working for me couldnt find out why so i used the tag
I watch plenty of those videos since i'm learning and i find better half of them hot garbage since people don't explain stuff well, they just do it. You did a great job explaining simple things that might be not that simple for someone who is learning and might not know all of even the most basic things. Great job man. Like and sub, keep up the great work!
you are really an amazing teacher......you just saved my little ass. Thanx to you sir
so useful!!!! U really know how to teach clearly. Thank u mr.
nice one Richard, am practising doing it
Nice, simple, quick, and instant subscribe.
Thanks. A few simple videos coming up, very basic then will start to turn it up a bit. Glad you’re here.
You are my new hero!
Well done, an easy video, very helpful, understood by me, a simple newbie italian! ;)
P.S.: you have a new follower! Keep it up
This helped me out on a project I just turned in for an online course. You explained it really well. Thanks so much!
Glad I could help
That's a very clear and handy bunch of instructions. Thanks for helping me out! :)
im trying to create a booking form that gets displayed when the user log in what should i add
this really helped me with my site that I am working on just for practice, thank you :)
Great tutorial
Thanks man, don't forget to subscribe, im making some very basic videos this month, but then will step up so there maybe things you're interested in.
Good explanation method and very patient attitude !!!
awesome explanation create more please... very very helpful
Thank you so much Richard! it was my first javascript👍🙏
thanks bro....the way u teach is awesome. You are an insipiration!!!
Omg, this is one of the most well explained tutorial ! Thanks!!
great job mam, keep goimg 👏👏👏
Best tutorial I have come across in life
Thanks man, I massively appreciate the kind words
Thank you so much; you are millions times better than my teacher
Aww, cheers mate, it's more about talking at the right level I think. Some teachers can be absolute geniuses but can't get that across
@@RichardCodes well the problem is that she doesn't explain how the ccs parameters affect graphically
I have a problem... when I try to do the first JavaScript function, it just opens the login bg-modal for an instant, an then it hides again.
any solution? :c
The same thing happened to me, did you surround your submit button within a form? Because when I took it out of the form and took out the submit type for the button it worked. It must be something to do with the HTML request associated with the button refreshing the page I assume.
I had the same issue. I had a link with href=" ". Writing a "#" instead of " " did the trick.
If you read your comments still @RichardCodes I come to this video so much, its so incredibly helpful beyond just Modals
I do. Thank you Jeff. I’m glad to hear it helps you
very cool - really like that you explained the css as well as you did. thumbs up on this tut.
Thanks Richard, this is what I have been looking for...this is great.. God bless you
Thanks a lot for your video. Your lesson helped me to create modal popup window! Have a good day!
you are a great teacher, thank you for this tutorial. Liked and subscribed my friend!
Thank you! The way you explain things is very very helpful.
Thank you so much Richard!! This helped a lot!! However I am confused(I am a beginner at JS) how did you run the js file with no includes? everything works except for that
I know this reply may be a little late but it may help someone else
add this before the body tag so that javascript can be able to affect all the elements
@@redahammada8605 thanks a ton!!! 🙏🏾🙏🏾
too helpful, very precise and explanations couldn't have been better.
Very helpful and easy to understand
thanx Richard for making it look so easy.
Awesome stuff . I am going to implement this in Angular on my youtube channel
Awesome, Richard. That's exactly what I am looking for! Thank you so much for sharing!
Very helpful. I was also able to understand the purpose of some properties which I did not know exactly why I was using them.
You're a really good teacher
You are an excellent teacher!!
Very good at verbalizing what you are doing. So helpful thanks
Perfect video Richard. Just what I needed for a website I am currently working on. Thanks
Woah thank you!! You are an awesome teacher! So easy to understand this tutorial!
Thank you so much for this tutorial! It's super and easy to understand!
Thanks for watching, what are you working on now?
@@RichardCodes I'm working on a project in which you can click the thumbnail and a bigger version of the image pops up onto the screen
@@siannazewdie7760 ah yes, I've done that in the past. Good idea for a video actually
Nice one Richard nice job I really like this! P.S best person ever!
Aww mate, thanks so much for the compliment. means a lot
@@RichardCodes Your welcome
Anyway you got a sub
very clearlty understand. i recommend you to my friends too boss. good luck
This is way easy than I expected. Thanks
I've got a one question. For example, imagine a human, who is disabled (have a bad sight or cannot use mouse) and they are using a key board. When button "click me" will be focused and enter will be clicked, our pop-up will be shown. So the question is, how will those people interact with our pop-up, if other buttons also will be available? Is there any ways to make other interactive elements unavailable when pop-up is shown?
I am looking for this in all the blogs and stack overflow ,you gives a clear and simple explanation 🤩 do more tutorials
Similar tutorials will be here soon
beautifully explained. easy to follow along
Really nice job, for beginners like me it was the perfect balance of speed and information!
Is there any function to make a fancy popup transition through JS?
You're a great teacher, following every step is very easy, thank you very much
I love the explanations so simplified thank you
Never thought about the way we can make the "X" button. Great job!
You can also use the html character × so you don't have to mess with the css transform.
Very nice, love the way you explain how each element works, very useful for beginners!
Thank you! This was helpfull, Your teaching style is perfect, i love it.
What a legend you are, you are like a english Jimmie Åkesson!
Haha thank you man, i just googled him!
Nice one.
Please make more videos on html , css , javascript
thanks man!!! you made it so simple to understand.
It was very helpful especially the in depth explanation
Hey I really enjoyed your video. Any idea how I could validate the required text before setting display to none?
search html5 input validation, thats a quick and easy way, if not there are some libraries to help
Thanks for this quick tutorial 👍🏼
omg! you explain so well!!! Thanks for your tutorial I needed it!
This tutorial is Great! However, I am having a problem aligning the text inputs and the image
same problem
Keep posting videos! This was excellent and easy to follow! Thank you so much!
I did everything as he said but the closing + wont work
Have u resolved this problem!?
I understood about the block element now... Thanks!
Excellent work
Thanks a lot for your help!
It helped me with a project and it worked perfectly.
Thanks a lot, again.
Pleasure. I have more similar videos coming so remember to subscribe.
Awesome tutorial with easy to understand explanations
This was soooo helpful. Thanks man
Glad it helped. Thanks for watching
very helpful, im gonna credit u in my project