How to Create a Modal Window For Your Websites - HTML, CSS & JavaScript Tutorial

In this video I'll show you how to create a custom modal window for use on your websites using plain HTML, CSS & JavaScript. This is very easy to do and can be added to your existing web projects.
Let me know if you have any other ideas for web design/projects! 💻
Link to source code:
codepen.io/dco...
🏫 My Udemy Courses - www.udemy.com/...
🎨 Download my VS Code theme - marketplace.vi...
💜 Join my Discord Server - / discord
🐦 Find me on Twitter - / dcodeyt
💸 Support me on Patreon - / dcode
📰 Follow me on DEV Community - dev.to/dcodeyt
📹 Join this channel to get access to perks - / @dcode-software
If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!
#dcode #html #javascript

[@Pareshbpatel]

A beautifully hand-crafted Modal Window using HTML, CSS and JavaScript. Thanks, Dom!
{2024-03-24}

[@garyfox8701]

Comprehensive. Excellent work. I am now your pupil.

[@tzrpm]

man you made it all flexed and centered 😀
very well done

[@apophis2946]

Keep doing these, the javascript examples are great. Seeing real examples of js.

[@timmyb4204]

Very beautiful, easy to use and implement, and no package dependencies! Easy to follow. Great teacher. Thanks for the awesome content!

[@RianY2K]

thank you for tutorial. This is very useful since modal is always used in every web app

[@Poyaproduction]

Brilliant. Thank you 🙏

[@sbasalan]

Thank you Dom, this is very good tutorial. I love it

[@smoothbeak]

Really good video. Shows how to use HTML, CSS, and JavaScript together without any frameworks or libraries which I feel is very important these days.

[@dcode-software]

The best way to learn 📚

[@nickeax]

Content as great as it always is from you, thanks!

[@amircahyadi9219]

Brilliant 👍

[@maksss93]

nice!
thank you

[@Astonoke]

omg i love you

[@joaquinleimeter2084]

when you use --gap, its just a placeholder for 15px (or a variable) ? or does the gap word have some function? Thanks

[@donaldmjbart-williams3144]

Great content. How do you open the modal without refreshing the browser? can it be assigned to an open link button?

[@donaldmjbart-williams3144]

Hello decode
Sorry to bother you mate, but I want to use your JavaScript modal in my project. How do you start the modal? currently, it only comes up on refresh.
How do I assign a link to bring it up? cheers bruv.

[@mcgrawja]

Great tutorial! Is there a way to make the " Got It" button redirect to a different url for the onClick?

[@neonpig5819]

I'm having a issue with the database creation for the login form and sign up form of you can please bring a video on that...

[@henriquevieira857]

i don't get what is the "var(--gap)" and what it do. Actually i didn't know that there is possible to put variables inside css.

[@shravankumarreddyjonnalaga2547]

I followed your code, iam getting empty value in html for ${htmlTitle} and
${contentHtml}

[@stephenmoore6493]

Excellent, how do I apply this to a link on a webpage?

[@azuadara]

Is there a video about how you made your vscode look like that?

[@dcode-software]

I'm using my VSCode theme, "dcode"

[@questprogrammer5484]

Good evening sir! please can you add time for prompting

[@OG-Everthing]

hi, thanks a lot for the video ... if anybody can help me to find the correct version of the html .i can't make the code running .. thanks a lot

[@saminyasar004]

which font are you using?

[@dcode-software]

Roboto Mono