JavaScript Modal Popup: Create a modal using HTML, CSS and JavaScript

[@codewithbubb]

You can see how the simple template that is the base to this project was made here: kzbin.info/www/bejne/sIHIZoVopt-Shc0

[@theJYC]

This was the most concise tutorial on modals I could find on KZbin. Thank you for the great info.!

[@codewithbubb]

Cheers! I try to cut out the waffle and get to the point.

[@keronwilliams5392]

Dude you're the GOAT. Thank you!!!

[@codewithbubb]

Cheers!

[@maxim_mahadeva]

God Bless You! And may the Force be with you!

[@excxmoody]

You all explaining all of this versus reading at the library...so helpful

[@codewithbubb]

Glad you are finding it useful Edd 😀

[@easy_ev]

Very good James, keep them coming and I will keep watching and learning.

[@codewithbubb]

Thanks Chris! Sure, will do. Where are you in your web development journey?

[@easy_ev]

@@codewithbubb I'm quite far in, I think I know a lot about javascript but it's putting it all together, everything you did in the video I knew but applying is something I need to practice more.

[@codewithbubb]

Yeah, I hear you - just keep practising and it'll get easier over time :)

[@makokageyama2190]

Hi! How do you create a modal whenever it is hovered in an area from an image map? I hope you can help me :( thank you so much

[@eching975]

hi, great video thanks for this. how to make modal box appear only on homepage load?

[@PrimephotoStudio]

Video is very helpful, thank you for sharing it.

[@codewithbubb]

You're welcome! Glad you found it useful 😀

[@stefanpfadt4353]

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

[@codewithbubb]

Hi Stefan, sure if you have some way of knowing whether a user is a guest or not (you can store it in a cookie / local storage) then you could trigger the modal when that condition is true.

[@MuhammadAli-dm8xy]

Hy I want to show without clicking "Show Popup" Botton how I can do that? Please must reply!!

[@codewithbubb]

You mean call the modal at the end of some sort of event / automatically? Just call the code that's inside the event listener for the click event whenever you want the modal to trigger. Hope that helps?

[@elemeno545]

bruh i keep trying this but i always get the error "uncaught TypeError: document.querySelector(...) is null". and i keep getting this error with every tutorial I use on modal popups!! pls help

[@shazbaz5695]

Hi can you please tell me how I can reuse this modal across different pages e.g. all the login buttons on different pages?

[@codewithbubb]

Hi Shaz, sure you could just add event listeners to any button you want to trigger it on. With this example if you wanted to customise the modal for different buttons you would need to create separate modals for each button (that is different).

[@shazbaz5695]

Hi@@codewithbubb I've tried everything. The buttons only get triggered if they are on the same page as the modal and if the buttons are on a different page to the modal it doesn't work. Please take a look at my code below and see if I'm doing something wrong. Thanks: var userSelection = document.getElementsByClassName('button'); var modal = document.getElementById('modal-wrapper'); for (var i = 0; i < userSelection.length; i++) { userSelection[i].addEventListener("click", function() { modal.style.display = 'block'; }); }

[@melissamoloney6312]

this was so helpful! Thank you :)

[@Hunterdrom]

Video is great but does anyone know how to link the JS and the HTML, I tried a normal way to link the pages but I guess it needs a function and I do not know enough to figure out how to modify it

[@Forbiddendream7]

unfortunately your examples are broken at link Completed project

[@codewithbubb]

Thanks for that! I've just taken a look and updated it.

[@jonathanchiclla3221]

bien pero lo que se quiere es que la ventana aparesca ni bien abres la pagina web.. sin apretar ningun enlace..porfvr

[@KoOodak]

So great and easy you make it man. What is the name of this program? Thanks for the video 👊

[@grandpaK420]

Codepen

[@johnbenjaminmercado7320]

Are you using Sass on this video? I hope i got some reply :(

[@codewithbubb]

Hi John, yes that's right i'm running parcel as a build tool which automatically compiles Sass in the project. I'm not using many features of Sass here, just the nesting really.

[@johnbenjaminmercado7320]

Thanks im kinda struggling on the classlist.toggle Because i cant over ride the property For example modal{ Position:absolute; Left: -500px; &--move{ Left: 0px; } When i tried to toggle the class via javascript, and it cant override the property and i dont want to use !important, It doesnt work Is there a thing i dont get here? I hope you could help me out

[@codewithbubb]

Are you doing this in Codepen? Can you share your code?

[@johnbenjaminmercado7320]

@@codewithbubb Okay i think I've notice the problem, I've just forgot to put the function inside the event listener, Sometimes you really need a 15 to an hour break just to notice the problem. Thanks for the replies though it really helps a lot ^_^ I hope we can see more content such as this or sample projects with Basic HTML,CSS and javascript.

[@codewithbubb]

@@johnbenjaminmercado7320 Ah, glad you got it figured out. Yes, sometimes a break can do wonders! Sure, I was planning on doing a series of converting PSD website designs to HTML/CSS if that would be of interest to you?

[@DevOpsConnect]

Can you prepare a video series on angular 6or7

[@codewithbubb]

Hi Ankit, thanks for the suggestion! I actually use Angular 6/7 quite a lot in my day job. Trouble is, there is a new version release every 6 months so video tutorials become outdated very quickly! I did think about doing some live training on it though - would you be interested if I were to schedule a KZbin live series on Angular?

[@krystal9819]

anyone knows what the name of the text editor that he"s using ?

[@codewithbubb]

Hi, it's Codepen - codepen.io/

[@krystal9819]

appriciate it bro (y)

[@codewithbubb]

You're welcome 😀