Create a Simple Popup Modal

[@RichardCodes]

Learn to make a mobile responsive menu - kzbin.info/www/bejne/jH7bgWyGgriCj68

[@downjoan313]

Judul Video Bahasa Indonesia?

[@DeepDivewithAliAbdaal]

Good stuff

[@tigredejadeec]

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

[@tiqo8549]

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!

[@RichardCodes]

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.

[@TraversyMedia]

Great job Richard, very helpful

[@RichardCodes]

Traversy Media thanks brad. You’re an inspiration.

[@poonamjagtap8392]

O

[@battlefist6884]

@richardcodes and @traversy good job for helping me out

[@cinquain0]

from the master himself

[@bk._550]

Traversy Media thanks brad. You’re an inspiration.

[@joelyoungberg1154]

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'); }); });

[@vijayakumar_3]

thank you

[@Chitranshleo]

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.

[@matthewcooper1683]

It’s amazing the fact you actually tell us what the code does makes us actually understand it

[@henryrobledo8365]

Finally, instructions for a simple modal clear and to the point. Thanks great tutorial.

[@williamb8162]

What a fantastic lil' video! One of the best I've watched on coding in a long time, maybe ever. Thanks!

[@briankelley2920]

Love the wonderful popup contact form. Help me out a lot. Thank you RichardCodes!

[@Darkest-Kn1ght]

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!!!

[@RichardCodes]

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.

[@ranjitasingh]

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; }

[@devbytoast]

bro any suggestion I can open my modal only in one button other buttons with the same id will not trigger the modal. thanks!

[@shazbaz5695]

@@devbytoast I'm stuck there too. Did you find the solution by any chance?

[@antwarior]

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

[@RichardCodes]

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.

[@samuelbaseke5305]

Best Tutorial and the best teacher.

[@vietnguyenc6612]

omg, I have to say the best coding-teaching video ever. Please keep doing this, I need more, Thank you very much

[@kennedyrmenezes]

Where are you man? Come back! You're awesome.

[@suhaibalnaji1220]

im trying to create a booking form that gets displayed when the user log in what should i add

[@nitria2549]

the margin between the input tags not working for me couldnt find out why so i used the tag

[@tanjimashraf803]

Is there any function to make a fancy popup transition through JS?

[@rahulkumar-yk2ru]

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

[@kislayvats5366]

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

[@StayFlyJW]

You should come back to making tutorials! You’re great at them!

[@RichardCodes]

your wish is my command, I'm back

[@techtutorialsfactory]

WoW! This is apt. You are a great teacher. Thanks a million Richard.

[@gulnazsharipova3966]

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.

[@lindatochukwu3081]

thank u so much Richard, but i don't know why the bg-modal background is not filling my screen, despite using 100% as height, but the width is very ok of which its 100% too, what do I do?

[@Vinomillz]

I soo much loved this video... watched lots of popup videos on KZbin on how to create popups but I couldn't understand them... but when I watched this I got it thanks men✊

[@lalarukh4751]

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

[@redahammada8605]

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

[@lalarukh4751]

@@redahammada8605 thanks a ton!!! 🙏🏾🙏🏾

[@taranjeet9]

Do you have any video on how we can connect these forms to collect data? like after clicking on submitting it would send data to MailChimp etc.

[@lollilolli4582]

You are a very good teacher, you explain things clearly ! Thank you for this :)

[@jhunlyfaderagao1133]

I do have a question. In your tutorial you choose to use the button click me whis is actually a button. What if I'm going to use is the navigation SIGN IN at the top of my website whis is actually not a button, it was a list.

[@KLXZ_]

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!

[@1nspir3dx]

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?

[@shadowytv]

Nice, simple, quick, and instant subscribe.

[@RichardCodes]

Thanks. A few simple videos coming up, very basic then will start to turn it up a bit. Glad you’re here.

[@jeanbravo4543]

hi richard, how can i perform various manners? Example I have a table with several rows and I want that every time I click on that row I get a modal. I try but it doesn't do anything I guess it's because I use id .. I would appreciate your help

[@kennethgonzalez6689]

5 minutes in just wanna say you are an AMAZING teacher thank you so much

[@neb542]

Very good at verbalizing what you are doing. So helpful thanks

[@kundansinghpanwar1113]

awesome explanation create more please... very very helpful

[@godgamer3717]

Hey do you know we can add a transition to that popup? Like an animation for when it opens.

[@User-li7qx]

Hello, Do you have any suggestions on how to add animation to the pop up window? Please.

[@MrConway007]

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.

[@RichardCodes]

Awesome. Thanks for watching. Good luck man.

[@microsurf128]

Great video! you positioned the modal vertically centred . How do you position the modal , say 50px from the top of the page?

[@evelienkulikova8825]

That's a very clear and handy bunch of instructions. Thanks for helping me out! :)

[@edgarhuemacsanchezhernande9776]

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

[@frankkj1995]

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.

[@franciscopena1140]

I had the same issue. I had a link with href=" ". Writing a "#" instead of " " did the trick.

[@epizone]

nice one Richard, am practising doing it

[@Arjunarjunskiy]

Thank you! The way you explain things is very very helpful.

[@photoinshot1355]

Great tutorial, very well explained, thanks.! Just one question when using php to handle errors how would you get the modal to open on the redirect from php?

[@JPBJJ801]

If you read your comments still @RichardCodes I come to this video so much, its so incredibly helpful beyond just Modals

[@RichardCodes]

I do. Thank you Jeff. I’m glad to hear it helps you

[@naie_1001]

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!!

[@BugArray]

Awesome stuff . I am going to implement this in Angular on my youtube channel

[@wduandy]

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!

[@ulemukawelama431]

Thanks Richard, this is what I have been looking for...this is great.. God bless you

[@seemaalam3127]

omg!! wt an explanation dear.I became ur fan. Add more n more videos.

[@kingchavez152]

Hey I really enjoyed your video. Any idea how I could validate the required text before setting display to none?

[@RichardCodes]

search html5 input validation, thats a quick and easy way, if not there are some libraries to help

[@safehaven1414]

Can I ask something? Where did you save your javascript? Is it external or you include it in your html file?

[@axelandru9346]

Good explanation method and very patient attitude !!!

[@lfcorullon]

Awesome, Richard. That's exactly what I am looking for! Thank you so much for sharing!

[@itsmereitumetse]

Very helpful. I was also able to understand the purpose of some properties which I did not know exactly why I was using them.

[@gvd1024]

I threw the text from your links into VS Code and it threw a bunch of errors. Mostly due to Style Definitions within other Style Brackets...??? i.e. header { ... other properties ... img { width: 30px; } } I'm new to learning CSS/HTML, but I can't find anyone anywhere that talks about having a style within a style...?

[@AlisonDurazo]

I am currently stuggling with this project. it works on the demo page when I add a video inside the pop up box, when I transfer it to my webpage using my style sheet I have on now, the video autoplays and there is no button to click to make it pop up.

[@israelemmanuel7905]

you are really an amazing teacher......you just saved my little ass. Thanx to you sir

[@newgenerationxpro3379]

this really helped me with my site that I am working on just for practice, thank you :)

[@sanatr9181]

It helped me a lot. I subscribed to your channel the moment you showed that modal

[@DUST35]

Remember to put in a reference to the .js file in the html code (was my fist website using javascript so I didn't know about it);

[@hiryuimajin]

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!

[@MrBulat1]

Thanks a lot for your video. Your lesson helped me to create modal popup window! Have a good day!

[@googleuser4257]

Great tutorial! As a javascript and CSS beginner, how could i achieve the modal to pop up once the page has loaded with a few seconds in delay?

[@zaeemAtif]

so much love man..!! You made my day.!!! :)

[@ivogeorgiev4245]

Awesome video mate, thumbs up. For some reason, using the class of modal-content was not allowing me to change its width. If this is an issue for someone else, just change the name of the class.

[@jmmacatangay_grizzlybear]

WHY ARE YOU NOT MAKING ANY MORE VIDEOS?

[@angadbhambra6914]

Very helpful and easy to understand thanx Richard for making it look so easy.

[@ahmedmujtaba209]

Hey, I need this type of popup form when I go to close the tab, it should not allow me to close the tab, unless I fill the details in the form, is it possible?

[@No-tt2tz]

I didn't understand one thing... How the login button and popup form are connected? I mean did we write any line when we'll click on login button only then popup form will open

[@wiktor7992]

This tutorial is Great! However, I am having a problem aligning the text inputs and the image

[@ishaanpandey]

same problem

[@christophersakwa1625]

you are a great teacher, thank you for this tutorial. Liked and subscribed my friend!

[@anansekrom]

too helpful, very precise and explanations couldn't have been better.

[@polikwalker9468]

Hi. Please, tell how to make this modal window to close by esc and clicking around the modal window. Hope you will see it

[@hsuyihnin7398]

so useful!!!! U really know how to teach clearly. Thank u mr.

[@ChapCanai]

Best tutorial I have come across in life

[@RichardCodes]

Thanks man, I massively appreciate the kind words

[@essaalu7047]

great job mam, keep goimg 👏👏👏

[@RobertDigitalArtist]

Nice, great tut and presentation. Is the CodePen working correctly? Because when I opened it, the modal content was already there, down the page, and nothing happened wen clicking on the 'click me' modal button...

[@syedmujeebh6661]

Nice one. Please make more videos on html , css , javascript

[@sasayaki]

This helped me out on a project I just turned in for an online course. You explained it really well. Thanks so much!

[@RichardCodes]

Glad I could help

[@BichaelStevens]

ok cool but how did you connect the javascript? im not working in codepen and im doing this in php

[@trendandviralnews]

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

[@sivuyileparkies2643]

I have done a complete modal with a working "register" button with error handlers, when you click on register it sends the user's data to the database. The problem that I have is that every time when the user clicks on the "register" button the modal disappears as if one has clicked the close button(X). how do I make it to only close the modal when one only clicks on the close button not the register button? Thank you.

[@alanhasan2898]

How do you then process and save the data that goes into the form. (I'm using Java FYI)

[@Arghya_10]

This is really helpful. By the way, Is there any kind of code, which will help me open and close the modal using the same button? and can this modal be triggered via link?

[@makikon4333]

Omg, this is one of the most well explained tutorial ! Thanks!!

[@alf58580]

For me when i click the button on my webpage the modal opens for like 1 second help! Edit: I fixed it by copying the html from the codepen in the description, but the close dosent work

[@puekbislayer]

I'm having the same problem! I'm going to look into it but hopefully someone has an answer soon EDIT: I fixed my issue by adding a "#" to the href component of my open link. Without it the page just kept refreshing.

[@TheirSavior]

beautifully explained. easy to follow along

[@thirupathisanthosh6414]

thanks bro....the way u teach is awesome. You are an insipiration!!!

[@arpitsrivstva]

How to make it a working sign up newsletter form, that people could actually click on sign up and they will be included in my mailing list? How to do that?

[@KenserNut]

Hi! Does this work for electron js desktop apps? Mine doesn't seem to work :((

[@stefanpfadt4353]

WOW! can i make the popup only appear when a specific user clicks on it, e.g. guest?

[@ilovenaturesound5123]

How do you make the button actually submit though? For example. in Node.js.

[@vojtavlachovsky7763]

I did everything as he said but the closing + wont work

[@AbhishekTiwari-jq8lc]

Have u resolved this problem!?

[@Narutoquest]

Great work buddy Your video is truly clear my dot when I work on it.

[@AntonMosin]

Does not work for me. My website is a static html/css one. I suspect Richard's code requires some upgrade to my website environments. Spent two hours on it but have not worked out what exactly should I do.. Can you help?

[@crazydrifter13]

which software are you using to edit the html and css code?

[@vaibhav4081]

Thank you so much Richard! it was my first javascript👍🙏