Create a Simple Popup Modal
ฝัง
- เผยแพร่เมื่อ 7 มี.ค. 2018
- Create a simple modal popup using HTML, CSS and Javascript. In this video, we create a popup form that appears when a button is clicked.
- Starting App - codepen.io/Middi/pen/WzeGGM
- The Completed App -codepen.io/Middi/pen/rJYOyz
- Image - richardmiddleton.me/comic-100...
- Instagram / richardcodes
- richardmiddleton.me - วิทยาศาสตร์และเทคโนโลยี
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
What a fantastic lil' video! One of the best I've watched on coding in a long time, maybe ever. Thanks!
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.
Finally, instructions for a simple modal clear and to the point. Thanks great tutorial.
omg, I have to say the best coding-teaching video ever. Please keep doing this, I need more, Thank you very much
It’s amazing the fact you actually tell us what the code does makes us actually understand it
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.
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.
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.
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 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
Love the wonderful popup contact form. Help me out a lot. Thank you RichardCodes!
Awesome, Richard. That's exactly what I am looking for! Thank you so much for sharing!
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.
Thanks Richard, this is what I have been looking for...this is great.. God bless you
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!
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!
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.
You are a very good teacher, you explain things clearly ! Thank you for this :)
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.
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!!
That's a very clear and handy bunch of instructions. Thanks for helping me out! :)
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✊
this really helped me with my site that I am working on just for practice, thank you :)
Very nice, love the way you explain how each element works, very useful for beginners!
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
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
Keep posting videos! This was excellent and easy to follow! Thank you so much!
WoW! This is apt. You are a great teacher. Thanks a million Richard.
It helped me a lot. I subscribed to your channel the moment you showed that modal
You're a great teacher, following every step is very easy, thank you very much
Great work buddy
Your video is truly clear my dot when I work on it.
Simple, short and it works. Thanks a lot. You helped me a lot. Got a sub!
omg! you explain so well!!! Thanks for your tutorial I needed 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
Perfect video Richard. Just what I needed for a website I am currently working on. Thanks
Thank you so much Richard! it was my first javascript👍🙏
very cool - really like that you explained the css as well as you did. thumbs up on this tut.
Omg, this is one of the most well explained tutorial ! Thanks!!
so useful!!!! U really know how to teach clearly. Thank u mr.
Best Tutorial and the best teacher.
Really nice job, for beginners like me it was the perfect balance of speed and information!
Thanks so much for this - I came for the modal and learned a whole lot more!
Great to hear mate. I’ll have some more similar videos out soon so don’t forget to subscribe and check back. Have a good one.
thanks bro....the way u teach is awesome. You are an insipiration!!!
Thanks a lot for your video. Your lesson helped me to create modal popup window! Have a good day!
Very helpful and easy to understand
thanx Richard for making it look so easy.
omg!! wt an explanation dear.I became ur fan. Add more n more videos.
too helpful, very precise and explanations couldn't have been better.
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.
Woah thank you!! You are an awesome teacher! So easy to understand this tutorial!
Hey i really love your style by explaining each and every code in a way that is super easy to understand. That is truly unique and different from other python youtubers. Thank you! Hope you can keep this up!
omg!!! you are a life savior i was looking for this thing so much thanks aaand keep it up
the margin between the input tags not working for me couldnt find out why so i used the tag
Thank you! This was helpfull, Your teaching style is perfect, i love it.
Such a great video and especially helps how you explain things with showing code etc. extremely helpful:) thanks you got new sub
Very usedful video.. thanks. Ur explanations are the best ive seen keep doing it bro
5 minutes in just wanna say you are an AMAZING teacher thank you so much
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.
I love the explanations so simplified thank you
Great video! Super simple and very well explained. Thank you!!!
Glad to hear it! thanks for watching mate
Awesome tutorial with easy to understand explanations
Good explanation method and very patient attitude !!!
Very good! Enjoyed the in-depth explanation.
This was really cool, thanks for the mini tut...
Very good at verbalizing what you are doing. So helpful thanks
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
awesome explanation create more please... very very helpful
very clearlty understand. i recommend you to my friends too boss. good luck
Very helpful. I was also able to understand the purpose of some properties which I did not know exactly why I was using them.
Nice job Richard, thanks so much.
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.
Good work! learn a lot from you in this video about coding a UI component.
Very nice and understanding tutorial! Thank you sir!
you are really an amazing teacher......you just saved my little ass. Thanx to you sir
Great video.
Helped me alot.
Thank you.
Continue making videos 🤗
You are an excellent teacher!!
thanks man!!! you made it so simple to understand.
The best tutorial so far...
This is way easy than I expected. Thanks
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.
Love you bro Nice Thanks for sharing your knowledge.✔✌❤
nice one Richard, am practising doing it
so much love man..!! You made my day.!!! :)
Thanks for this quick tutorial 👍🏼
Thanks Buddy :) Its easy , simple and a great tutorial !
Traversy Media thanks brad. You’re an inspiration.
Thanks mate! Nice video. It helped me a lot.
Awesome stuff . I am going to implement this in Angular on my youtube channel
loved it you explained it throughly
I understood about the block element now... Thanks!
Best tutorial I have come across in life
Thanks man, I massively appreciate the kind words
You are a good tutor. Excellent video.
great job mam, keep goimg 👏👏👏
i follow in instagram never know u have channel ...your are awesome ...plz make alot off videos for new bie
You are great ❤️❤️❤️
This tutorial solved my problem ❤️
I know your channel from freecodecamp.U are awesome!!
Your explanation can solve any problems and very clear to the point.Very experience!!
Great Tutorial Richard.
Best HTML Tutor, Thank you very much :) :)
You are awesome Richard. Subscribed.