Coding / Programming Videos

Post your favorite coding videos and share them with others!

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

Download Video link >



JavaScript Modal Popup: Create a modal using HTML, CSS and 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.

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.

source

Bookmark(0)
 

 

View Comments source >

Transcript view all >

00:00 in this tutorial I'm going to show you

00:01 how to make a really simple modal pop-up

00:03 using JavaScript

00:08 hi this is James from junior developer

00:11 central and welcome to this tutorial

Leave a Reply

Please Login to comment
  Subscribe  
Notify of
Translate »