Build a Popup With JavaScript

[@Uncaught_in_promise]

This is most comprehensive and straightforward tutorial on modals I've ever seen. What makes it unique - handling multiple modals. Most of KZbin educators show only how singular modal works.

[@nikhilsharma2982]

Hi, your way of explaining the each and every details and your approach of covering every dependent elements which are being used or going to be affected in the background is simply awesome. Thanks a lot for covering it in a speedy but with a very simplified way.

[@juicifer2024]

im not joking when i say you have taught me more about web development than any college programming course did. Thank you for teaching the public in a very clear concise way.

[@ryand640]

Seriously strong video... concise, well paced, extremely well organized and well presented . Great job!

[@f44nboy]

Nothing to add to that!

[@twoonswig3667]

I've just gone mental trying to do this using stack, gpt and other videos. Gonna have some trouble with databases trying to get the modal to reflect the information relevant to which image was clicked but hopefully a bit of python can sort it out. You're such a good creator, 10 stars

[@glensrb4723]

Perfect timing! Was looking for a modal solution to a login form and this is just perfect. Thanks mate! :)

[@WebDevSimplified]

Glad I could help.

[@shamana-om]

Thank you for this great tutorial! I've been looking for a video like this for a long time already and had many uneffective attempts to build a modal on my website. With this tutorial it now all makes perfect sense and the modal perfectly works! Thank you!!

[@masterofnan2870]

Dude, you rule. I have been pulling my hair out trying to deal with other modal methods. Thank you!

[@timderks5960]

Kyle, your videos are a true lifesaver. I'm a pretty good coder - for a hobbyist at least, but my CSS knowledge is pretty basic. Because of this, I used to have some complex functions to handle button clicks on elements that have children, since the target of the event can be either the clickable element, or one of its children. If only I knew about pointer-events sooner, that could have saved me so much time! There's a lot of great JS and CSS content out there, but in the last couple of years, I've always come back to your videos. Thanks for all the effort!

[@jjwebb15]

Came here for the modal turotial, left with a lorem shortcut. Gotta love it!

[@dan1523]

Hey bro, I just wanna say that Your vids have really helped me understand some concepts that I had a hard time grasping in my bootcamp. keep up the great vids!

[@danbuild977]

Absolute Fire in 15 minutes. Your videos are incredible, and super easy to follow. Thank you.

[@masterchief9148]

Honestly, you're my favorite dev youtuber ! Each details are explained extremely well and without search your word !

[@MRAMetharam]

This content is golden! Not only is it short and direct to the point, but it also shows off a lot of very useful techniques! It is very seldom that I come across videos like this! Thanx for being awesome and sharing this!

[@deniskomarov189]

Maybe it's just me but if you'd like to code along 0.75x speed seems to work well. Helped to not only keep up but also better understand how & why each line was being used. If you can make peace with the slightly slower commentary. Great job!

[@Fatfingertunes]

Excellent! And far more sophisticated than I would have done myself... really appreciated.

[@sanjaymahto5825]

You are justifying the name of this channel. thanks 🙏

[@aram5642]

The modal dialogs are complex matter on various levels (template abstraction, vertical scrolling, responsiveness, focus, tabindex, etc), but this tutorial is a good starting point. Never ever though remove css outlines from focusable elements - for the sake of accessibility.

[@abhirammadhu2973]

This is so perfect and well explained. All the modal popups that I have check, they make it over complicated.

[@Aweheid]

Wow! your way of teaching is amazing! it's straightforward, explains everything directly in short words, is well presented, prepared, and very very clean and organized. Thanks, many many thanks.

[@Ai4698]

I tried it by myself at first but yours looks so much better. Also never heard of data-* until this video

[@adamjamiu6764]

Thanks, kyle. I don't know how I will appreciate your efforts. you made me understand how I will put my javascript skills into real-world projects

[@daalwada]

You can build bootstrap v6.0 alone.. popup, accordions, this and that.. and you have no idea how much knowledge you have man! 😄

[@silverbell6160]

Wow! I looked for something like this all afternoon. I have some modals that i need to close programatically ! All i found was jquery options. I wanted to use vanilla js. Thank u! Well explained, to the point.. great ⭐⭐⭐⭐⭐

[@greenfigure3941]

Thank you! I was looking for something like this and you helped me really much with my popup for my chrome/firefox extension. Without you, I would have skipped it completely and only used boring html headers inbedded in the site which would've looked awful and barely worked.

[@V.Z.69]

Pretty good. It just drives me crazy that you didn't use a single semicolon in JS.

[@sfoxj]

I don’t use semicolons😊

[@abhilashLeader_07]

I use but it is not mandatory....i dont know y 🤣🤣🤣

[@ahndeux]

Holy moley. That is a lot of work to create a modal.

[@MYount]

the official Kyle pop up. I got so much from this video thanks. I love the way you popped up in the beginning. lol

[@MickenCZProfi]

Thanks, this is very helpful and simple to understand. A lot of the code can be avoided if you are triggering the popup on some event and not a button (in my case when you lose in the game).

[@ismailmunyentwari3752]

Thank you bro 👊.... I was wondering the way I will create my own modal without Bootstrap. But now you turned me to it .

[@jaydenmoon1165]

That was an awesome tut as always! - lol needed a refresher on this topic, thank you !

[@starleaf-luna]

7.8 billion people should be subscribed to you

[@okoliginikachukwu6036]

Pretty straightforward and beginner friendly. Great job! Only issue I'm having is that the modal is triggered on page load instead of on button click. Pls what should I do

[@dannyezechukwu1175]

Great video. This helped me a ton! This channel is awesome!

[@ronpalmer7260]

This threw me for a loop in the js: const overlay = document.querySelector("#overlay"); in yours, you have ("overlay") without either an id or a class indicator and you didn't set the class on the overlay to overlay. I was getting NULL for overlay and it took me a while to figure it out. But I'm a newbe to javascript and I learned a bit figuring it out. Its working great and I understand it much better now. Thanks.

[@danny_the_K]

I know this is old, but thank you for keeping this up on KZbin... This is the 1st great explanation of opening/closing a child window (modal) in Javascript... I have been searching for this for a week and watching poorly done and overly hyped videos that are worthless... no explanations of why/what they are doing. I have one question which I will now have a code base to work from, Can I open a link into a DB for a submission form in this modal... I am building a landing page for a new project and want to offer a signup for more info type modal... I think this gives me the knowledge I needed to work with.

[@katkodes6055]

You have the best videos! So grateful

[@bonguthandokhumalo7552]

Thanks a lot, man, your videos are always helpful. Keep up the good work.

[@thedesignerdeveloper8205]

Thank you for the tutorial! I just subscribed so I'll definitely be watching more of your tutorials.

[@roanmaravillo9895]

Thanks kyle you really helped me on my project looking for a carousel tutorial in the future.

[@gifbfbvhvhdhfhfjffjfnfhfb515]

bes tutorial ive ever seen and you show the code when youve done . ill give you a cheeky sub

[@ligmadick3401]

I can recommend to place the close modal button at the top right with the following css: position: absolute; top: 0; right 0; So it is independent from the modal header in case you are not using flexbox for it.

[@sarvij9870]

You are the best, awesome explanation, step by step , ty

[@alexjulius69]

Yes! This is precisely what I need for my software, thanks

[@mattmelester8929]

Another great job (as usual). Thanks.

[@shvideo1]

A great behaving modal and great technique as well. Great job. Thank you.

[@pixelum2023]

Very interesting! I'll definitely incorporate that into some of my projects!

[@thmasibsirinzad3693]

Thank you for sharing this code. i have been searching modal pop code for a long time, finally i found what i wanted

[@WebDevSimplified]

I'm glad I could help!

[@rahalmehdiabdelaziz8121]

Great video as always, if you add comments on the code it should be perfect

[@grownmancrying]

Man you rock! Thanks again for this one. Keep up the great work!

[@WebDevSimplified]

Thank you!

[@bikramchettri9405]

Thanks mate. Your tutorials are precious. If you can do a video on throttling and debounce it will be very helpful.

[@WebDevSimplified]

I'm really glad my videos help. Debounce is a fairly technical and advanced topic, which I generally believe is done better through text. That said, I will look into seeing if I can figure out a good way to teach that concept through video.

[@bikramchettri9405]

@@WebDevSimplified Thanks for the reply.

[@DejanPavlovic-tu8vj]

Thank you so much,so much i learned from this video.. Thank you again! Hope one day ill make this easy like you... Thanks !!!!

[@failking888]

mAAAAn, thx I'm making the project and had some troubles and ur video solved it, big thx u)))

[@MYount]

Hello Kyle can you do a quick video on multiple buttons opening different modals?...nevermind I just figured it out from the video, thanks for the great video.

[@carolineyorke3651]

hey what did you do? I want to do the same thing

[@AcceleratedExpansion]

@@carolineyorke3651 Same here

[@Sevenstarz1216]

Man I've been searching for the solution! Please help!

[@Sevenstarz1216]

Just figured it out!

[@siddarthkotthur1558]

bro u deserver million more subscribers!

[@oteror]

Great tutorial! Easy to follow.

[@mikeistp5736]

lol The start. pressed like since this video is simple and understandable for me, the nub one. Well, the activity(how's he jumps in a html-tree) of JS is a mystery for me at this moment. Hope will find out very soon to understand the 'shit' on a new level.

[@lazarzbiljic4903]

OMG... you save my life bro, tnx!

[@gandharvakalia]

thanks sir for such a understanding concept and video

[@JorgeRivera-rp1zw]

tHANKS TO SHARE THIS VIDEO WAS AWESOME..! AND VERY USEFULL..! PLEASE DO IT MORE...! SUCCEEDS..!

[@detoxfi5926]

Thank you for the great video. can you make a video explaining how to get those pop-up triggers such as time and intent to exit

[@bonganimkhaliphi8695]

Excellent Tut. Enjoyed it very much

[@stratokrat6290]

High quality content. Well done and thank you!

[@WebDevSimplified]

Thabk you. I'm glad you enjoyed it.

[@pascalgoldmann6429]

Thank u my friend! Very Strong tutorial

[@calvinlee4346]

fantastic tutorial! The issue I have been having is creating multiple Modals for my page.

[@gagiknavasatariyan7316]

It is really helped me. Great work

[@jenniferhayward1137]

I have your code identically set-up and mine will not display like yours. what am I doing wrong??? I mean exactly. still no modal will display. What am I missing

[@naie_1001]

you are a lifesaver, thank you so much!!

[@latinwarrior01]

Excellent code sample and explanation! Thanks for putting this video together. I will subscribe to your channel.

[@binihalex8097]

I don't care about the mic. Awesome clip!

[@hamman794]

Thanks from Ukraine! Good tutorial! )

[@leavill1209]

I dont know if anyone will see this but I was wondering if instead of a button you could use an image to open the modal?

[@ximb2005]

hey, yeah its possible, right now I made a group of images that when u click the modal open

[@jc19438]

I don't understand why #overlay is the correct property to use to click outside the modal and close it. Wouldn't a click event for overlay listen for events on the entire screen. As I'm writing this I'm realizing that it may be something with the overlay div being on the outermost html.

[@PiotrSygutPL]

Great job - thanks 👍

[@olegfare4625]

you scared me at the beginning!

[@ben8140]

Great tutorial!

[@KeeveSinger]

Awesome explanations! Quick question. What is the 'live server' you were referring to? How can I use it?

[@jivanmainali1742]

Bro pointer-event :none does make everything insensitive to touch or click event but when you use this property it is able to click a button and if we use z-index instead of event-pointer then still button is non clickable .why?

[@Konstantah888]

Great channel, keep it up! Glad that I found your tuts. The only one thing which makes me crazy is your fast speech like it’s pretty ez pz lol.

[@WebDevSimplified]

I'm glad you are enjoying the tutorials. If I am speaking too fast you can slow down the video to .75 speed and that may help.

[@Konstantah888]

No worries, that’s fine mate. I’ve already started slowing it down. Hope to see some crash courses from you soon.

[@WebDevSimplified]

@@Konstantah888 I have quite a few crash courses on the channel already for various technologies. My video for tomorrow is going to be a bit of a crash course on building a REST API with Node.js as well.

[@worldlyemo2290]

This is an awesome video, thank you so much for the help. Ive had the peculiar problem, that the close button disappeared after exactly 4 times of opening the modal. It isn’t really that important for my application, but I still found it a bit strange

[@lukabubnjevic5126]

exactly what i was looking for!

[@Jimbo-zd8cz]

nice tutorial! heads up to anyone using bootstrap tho! the classes clash and need changed

[@JoeShmo-1234]

That was clear and concise, personally I'm used to jQuery but thank you nevertheless

[@WebDevSimplified]

I'm glad you enjoyed it. I generally try to stay away from jQuery since you can do nearly everything jQuery did with plain JS now.

[@JoeShmo-1234]

@@WebDevSimplified fair, and i agree - jQuery is JS after all

[@gindevgin9298]

i really love your contents! thanks!

[@wickedgabrugamer]

love your explanation man..

[@alanrobbo6980]

This is Fantastic, Thank You.👍

[@leochannel1189]

Thank you so much! You helped a lot and explained perfectly!

[@xylesx]

Love this! Thank you for this. ;) Learned a bunch.

[@WebDevSimplified]

Thank you. I'm glad you enjoyed it.

[@JamesHalpert8555]

Great tutorial...but kindly explain the CSS properties and javascript code a little slowly.Thank you:)

[@JacoblBroughton]

Thank you so much, man. Great, informative tutorial.

[@frankdambra1810]

Very elegant. For some reason though even after setting very high z-indexes for the various elements Wordpress is still putting wooCommerce elements and the footer over the modal. Weird.

[@repenning1]

If you would do this project again would you use ?

[@aufantaufiqurrahman2794]

alhamdulillah, thank u very much!

[@SH-lt2iv]

Very good tutorial learned alot thanks!

[@mwutal9051]

Nice videos! Really appreciated! Just started with Web Dev and still struggling with JS. Any recommendation which path to follow? Greetings from Germany!

[@juangabriel2559]

Great video bro, thank you!

[@0119325]

If we create two modal buttons the functions does respond to eachone so that's the purpose of selector forEach?

[@kurtcamarines9481]

Any clue how to loop through all the other button and close the active ones before opening a new one?

[@oscarleon3008]

Just what I need, perfect!

[@robschlette4317]

This was super helpful. I'm failing to config an event listener for the escape key to call closeModal. Any tips?