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

You’ll find JavaScript modal forms in lots of Wordpress themes and also all the popular CSS frameworks (think Bootstrap for example) and they definitely have their uses in terms of capturing information or displaying notifications.

However sometimes when working on a simple HTML and CSS project, you don’t want to load in an entire framework or indeed a JavaScript library just to show a modal so why not code your own?

In the video, you’ll learn just how easy it is to create your own HTML modal popup as it’s just some simple markup and a few basic CSS rules. It’s also a good one to add to your beginner JavaScript projects list.

Once you’ve created the HTML markup, you’ll learn how to create the necessary CSS rules to style and position the modal in the center of the screen. You’ll learn how to add an overlay and also how to make this JavaScript modal stand out from the page.

The final part of the tutorial will focus on how to use JavaScript to display and hide the modal when clicking on a button and also filling out a form contained within the modal.

#javascriptmodal #javascriptpopup Channel Handle @codebubb

[theJYC]

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

[keronwilliams]

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

[maxim_mahadeva]

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

[easy_ev]

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

[PrimephotoStudio]

Video is very helpful, thank you for sharing it.

[eching]

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

[excxmoody]

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

[stefanpfadt]

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

[makokageyama]

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

[KoOodak]

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

[johnbenjaminmercado]

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

[shazbaz]

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

[MuhammadAli-dmxy]

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

[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

[DevOpsConnect]

Can you prepare a video series on angular 6or7

[elemeno]

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

[Forbiddendream]

unfortunately your examples are broken at link Completed project

[krystal]

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

[jonathanchiclla]

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