Build a Popup With JavaScript

Подписаться 1,6 млн

Просмотров 369 тыс.

50% 1

If you have used the web anytime in the last 5 years then you have most definitely run into an abundance of popups, also known as modals, which are quickly becoming one of the most popular components in web development.
In this video I will cover how to create a simple modal that animates in on button click, and fades out when the modal is closed. This modal is also able to be closed by clicking anywhere outside the modal which is something most tutorial don't cover. Lastly, this modal is setup in a way that it is incredibly easy for you to customize it to the needs of your exact website.
📚 Materials:
Code: github.com/Web...
🧠 Concepts Covered:
- How to use transform translate to center elements
- How to show/hide elements with a button click
- Smooth open/close animation transitions
- How to style an ugly modal 😜
- CSS position fixed
- Using CSS pointer events to prevent click events
🌎 Find Me Here:
Twitter: / devsimplified
GitHub: github.com/Web...
CodePen: codepen.io/Web...
#JavaScript #WebDevelopment #Modal

Опубликовано:

24 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 325

@BMikel 3 года назад

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

@nikhilsharma2982 4 года назад

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.

@ryand640 4 года назад

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

@f44nboy 2 года назад

Nothing to add to that!

@glensrb4723 5 лет назад

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

@WebDevSimplified 5 лет назад

Glad I could help.

@jjwebb15 2 года назад

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

@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.

@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

@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 4 года назад

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

@timderks5960 2 года назад

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!

@dan1523 4 года назад

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 4 года назад

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!

@Fatfingertunes 3 года назад

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

@V.Z.69 4 года назад

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

@foxjonesofficial 2 года назад

I don’t use semicolons😊

@abhilashLeader_07 Год назад

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

@deniskomarov189 3 года назад

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!

@greenfigure3941 4 года назад

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.

@daalwada 4 года назад

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

@Ai4698 Год назад

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

@abhirammadhu2973 2 года назад

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

@adamjamiu6764 3 года назад

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

@Aweheid 2 года назад

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.

@MYount 3 года назад

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

@sanjaymahto5825 3 года назад

You are justifying the name of this channel. thanks 🙏

@starleaf-luna 3 года назад

7.8 billion people should be subscribed to you

@silverbell6160 2 года назад

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

@MickenCZProfi 3 года назад

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 .

@okoliginikachukwu6036 4 года назад

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

@aram5642 3 года назад

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.

@gifbfbvhvhdhfhfjffjfnfhfb515 2 года назад

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

@ahndeux 2 года назад

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

@jaydenmoon1165 2 года назад

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

@siddarthkotthur1558 4 года назад

bro u deserver million more subscribers!

@jenniferhayward1137 2 года назад

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

@dannyezechukwu1175 11 месяцев назад

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

@katkodes6055 Год назад

You have the best videos! So grateful

@danny_the_K 3 месяца назад

I know this is old, but thank you for keeping this up on RU-vid... 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.

@ligmadick3401 4 года назад

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.

@bikramchettri9405 5 лет назад

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

@WebDevSimplified 5 лет назад

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 5 лет назад

@@WebDevSimplified Thanks for the reply.

@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.

@thmasibsirinzad3693 5 лет назад

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

@WebDevSimplified 5 лет назад

I'm glad I could help!

@MYount 3 года назад

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 3 года назад

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

@AcceleratedExpansion 3 года назад

@@carolineyorke3651 Same here

@Sevenstarz1216 2 года назад

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

@Sevenstarz1216 2 года назад

Just figured it out!

@grownmancrying 5 лет назад

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

@WebDevSimplified 5 лет назад

Thank you!

@bonguthandokhumalo7552 3 года назад

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

@roanmaravillo9895 3 года назад

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

@JorgeRivera-rp1zw 3 года назад

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

@sarvij9870 Год назад

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

@alexjulius69 2 года назад

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

@thedesignerdeveloper8205 4 года назад

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

@rahalmehdiabdelaziz8121 2 года назад

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

@stratokrat6290 5 лет назад

High quality content. Well done and thank you!

@WebDevSimplified 5 лет назад

Thabk you. I'm glad you enjoyed it.

@pixelum2023 2 года назад

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

@failking888 3 года назад

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

@shvideo1 3 года назад

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

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

@mattmelester8929 Год назад

Another great job (as usual). Thanks.

@lazarzbiljic4903 2 года назад

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

@mikeistp5736 5 лет назад

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.

@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

@lukabubnjevic5126 4 года назад

exactly what i was looking for!

@pascalgoldmann6429 2 года назад

Thank u my friend! Very Strong tutorial

@oteror Год назад

Great tutorial! Easy to follow.

@jivanmainali1742 4 года назад

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?

@PiotrSygutPL 2 года назад

Great job - thanks 👍

@calvinlee4346 2 года назад

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

@ben8140 2 года назад

Great tutorial!

@naie_1001 2 года назад

you are a lifesaver, thank you so much!!

@JacoblBroughton 4 года назад

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

@adityarocker7205 3 года назад

Premium Stuff Really Loved.....🤗🤗

@xylesx 5 лет назад

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

@WebDevSimplified 5 лет назад

Thank you. I'm glad you enjoyed it.

@hamman794 3 года назад

Thanks from Ukraine! Good tutorial! )

@aufantaufiqurrahman2794 10 месяцев назад

alhamdulillah, thank u very much!

@latinwarrior01 3 года назад

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

@Konstantah888 5 лет назад

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 5 лет назад

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 5 лет назад

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

@WebDevSimplified 5 лет назад

@@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.

@binihalex8097 3 года назад

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

@oscarleon3008 3 года назад

Just what I need, perfect!

@bonganimkhaliphi8695 3 года назад

Excellent Tut. Enjoyed it very much

@gagiknavasatariyan7316 4 года назад

It is really helped me. Great work

@alanrobbo6980 2 года назад

This is Fantastic, Thank You.👍

@wickedgabrugamer 4 года назад

love your explanation man..

@gindevgin9298 3 года назад

i really love your contents! thanks!

@codedropsjs9633 3 года назад

that is what I was looking for

@leochannel1189 4 года назад

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

@SH-lt2iv 4 года назад

Very good tutorial learned alot thanks!

@olegfare4625 2 года назад

you scared me at the beginning!

@Jimbo-zd8cz 4 года назад

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

@MASHOfficial 4 года назад

lovely video, helped me a lot

@red1io 2 года назад

great tuto. thank you

@juangabriel2559 4 года назад

Great video bro, thank you!

@jc19438 2 года назад

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.

@HD-qp3fw 4 года назад

Not a damn thing works. 10:06 - you wrote class="modal active" 10:53 - class="modal" without active Go to your GitHub: styles.css there is = .modal.active and overlay.active, but in HTML not a single word "active". Does it work like that? Sorry if the spelling is not correct, I am writing with the help of a translator.

@HD-qp3fw 4 года назад

@@displayname8935 Ok

@TheTwitch03 3 года назад

I know I'm a bit late on this, but did you ever figure this out? I'm having some trouble with it still.

@kelvinace2480 3 года назад

@@TheTwitch03 same, mine also is not working.

@TheTwitch03 3 года назад

@@kelvinace2480 Yea it sucks lol. I still haven't figured this out.

@es_stinkt_puhfelix6293 2 года назад

0:00 BRO IM DEAD💀what was that😂

@michi19935 6 месяцев назад

Thanks so much!

@bohdan90 5 лет назад

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

@WebDevSimplified 5 лет назад

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.

@bohdan90 5 лет назад

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

@markroyacebuche9829 4 года назад

thank you for this tutorial it really helps

@KeeveSinger 2 года назад

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

@mwutal9051 4 года назад

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