Learn how to create a modal popup with some simple JavaScript.
In this tutorial, we’ll be creating a JavaScript modal popup that is actually just a simple bit of HTML and CSS with some JavaScript to trigger the display of the modal upon a button click.
Base project: https://codepen.io/codebubb/pen/jJOoEO
Completed project: https://codepen.io/codebubb/pen/QowWMq
Don’t forget to subscribe to support the channel and you can follow me on Twitter @codebubb.
https://www.youtube.com/watch?v=KX0NR5HtQ1Q
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.