Create a Modal With HTML, CSS & JavaScript

[Music] hey what's going on guys so in this video we're gonna create a modal which is basically kind of like a nice pop-up that fades in and you can put forms in them you can put just text or whatever and you often see these in frameworks like bootstrap well I'm gonna show you how to build it from scratch using just HTML javascript and CSS ok very little JavaScript and very little CSS it's gonna be pretty simple so this is it right here we have a button that says click here if I go ahead and click it you'll see we get this modal that opens we have a header or footer and then a main area and if I click on this X button right here it'll close up also if I click anywhere outside of the modal it'll close but if I click inside the modal you'll see that it will not close unless of course it's on the X button all right so that's what we'll be building in this video it's something very simple but you'll brush up on your CSS and your vanilla JavaScript skills so let's go ahead and get started so if you guys really enjoy my content you feel like you really get something out of it consider becoming a patron to push me to keep bringing you high-quality educational videos showing your support with even $1.00 means the world we have different perks and tiers including a $2 tier that'll give you every udemy course that I release absolutely free to learn more check out patreon.com/crashcourse to do code i'm also using the live server extension if you want to use that you can click on the extension icon and just search for live server and it'll pop up and you can just click the green install button and what that'll do is it will allow you to open your file up on your localhost but of course you don't need this you can simply just click on the HTML file all right I'm gonna make this a little smaller make this a little bigger and we're gonna get started so I have an empty folder in projects called simple modal that's we're going to create this so just create a folder somewhere on your machine and then we're gonna have three separate files we're gonna have our index dot HTML and if you want you can put them all in the same file but I like to separate the HTML and the CSS we're gonna create a style dot CSS and we're gonna create a main dot j/s alright so we're gonna start with the markup of course so in our HTML file I'm using Emmet so I'm gonna do exclamation tab to give us this basic head body structure for the title will just say simple modal and then we're gonna link our stylesheet so let's go ahead and do that so style dot CSS and then we're gonna link our JavaScript file and we're going to do that right above the ending body tag so we'll put in let's say script and source is gonna point to main dot J s alright so that should be good now I'm gonna save this I'm going to open it with live server I can just right click and say open with live server and that'll open it up alright you can see the title says simple modal now what I'm gonna do is we're gonna start off with a very simple simple modal with no header or anything just the text alright and then later on we'll create another index file index - dot HTML or something where we'll add the header markup and stuff alright so what we're gonna do is we're gonna start off by just putting in a button so let's create a button we're gonna give this button an ID of modal BTN I'm also gonna give it a class of button to style it alright so I was able to do that little abbreviation because I'm using Emmet so what we're gonna do in here is just it will just a click here okay so that's our button let's save it'll auto load because I'm using live server and then underneath that we want the mark-up for the actual modal so we're gonna put in a div with the ID I'm gonna call it simple modal and I'm also going to give it a class of modal alright and in here we're gonna have another div with the class of modal - content okay so in the content let's put a span and we're gonna give this a class of close button so close BTN okay and then we want the little X symbol we can get that with ampersand x and then semicolon that will give us that little symbol alright and then as far as the the text in the modal I'm just gonna put a paragraph and we'll just say hello I am a modal and that's it so let's save and you're gonna see this stuff right away okay because we have what we have to do when we're building a modal is we need to hide it when the page loads so you can't see it and then we have a function that's going to then display it okay and we're gonna get into that but before we get into any JavaScript what I want to do is just add the CSS alright so let's go into our style CSS and let's just add some some basic body styles so I'm going to set a font family of arial helvetica sans-serif I'm gonna set a font size of 17 pixels and what I do I put a comma there which would be a semicolon and then let's put a line height of 1.6 alright and that's that's all I want for the body now I'm gonna style the button as well it's not something we really have to do but I just think it just looks a little better so remember we gave it a class of button so we're gonna give it a background color or just background of coral which is that color right there whips when you use vs code you get these little it'll actually show you the color and the hexadecimal and all that stuff if you're using atom pigments is a really nice plugin that'll do the same thing all right so let's set some padding on this button I'm gonna do 1m top and bottom 2m left and right and let's go ahead and change the color of the text white in the button and we're gonna set the border to zero and save and there's our button and then you just want to add a hover state so we'll say button hover and I'm just gonna set the background to a dark gray all right so now when we hover it and it goes to almost a black color so that's it for the button now we're gonna start to style the modal now for the modal remember it has a class of modal we want to display none because we don't want it to show it at first when the page loads but if we do this now we're not gonna be able to see it while we're actually styling it so let's just let's just comment that out for now alright and then we'll start to add our Styles now modal is gonna be basically the entire area around it okay when we when we have the little modal content pop-up there's the the dark around it that's what this is that's what this class is so we want to set this position to be fixed okay it's going to be a fixed position and we're going to set the z-index okay we're gonna set Z index to one Z index is like the order of of elements the higher the Z index the the more up front it's going to be alright we also want to set it to left the positioning left zero and top zero okay so we're basically saying start you know at the left and a left top and then we want a hundred percent with and a hundred percent height we want it to take up the whole window so it's say height 100% and width is also going to be 100% all right so let's see what else you want to do here we want to do an overflow auto okay so we want we want to that'll enable with scrollbar if it's needed and then for the background actually let's just save this so we're not seeing much any much of a difference here but for the background we want it to be dark but not completely dark we want it to have a little bit of transparency all right so what we'll do is we'll set a background let's set background color and we want to set it it should be background - color and we want to set it to an RGB a value okay which is red green blue but we want to be able to add opacity to it or transparency so we want it to be black so RGB black is zero zero zero red green blue zero for all of them and then for transparency you can choose how transparent you want it I'm gonna go ahead and go with 0.5 and save and now you'll see that we have everything's a dark background and you can change the value of this if you want to do like 0.2 and save it you'll see it's much lighter if you want to do 0.9 it'll be very very dark all right but we're gonna stick with five I think yeah all right so that's the actual modal class now we want to deal with the content which is the box okay the modal box so it's a modal - content and let's see for this we're gonna set a background color I'll set background color let's do a light gray so I'm gonna do f/4 three times let's set a margin of top and bottom 20% okay this is how far we want it to go down we'll say 20% of the window and then auto for left and right because we want it to be in the middle all right so if we save that it's now gonna look like that it's moved down - and if you want to move it down further you could say you could say 30% that'll move it down if you could say 10% if you wherever you want to put it I'm going to keep it at 20 all right so let's also add some padding I will say padding 20 pixels just like that and then the width is something that you can also change and decide I'm gonna say 70% save that now it's only 70% okay and you can make it bigger or smaller let's see I'm also going to add a little bit of box shadow so it's a box shadow and for this we're gonna have 0 0 5 or 5 pixels 8 pixels yeah 8 pixels and then 0 and then let's do an RGB a color okay of black so 0 0 0 and then the opacity will say 0.2 all right and then we're gonna put a comma here and we're gonna let's just copy this and for the other side we're gonna do 7 0 7 pixels 20 pixels and that should be good let's save there we go so now you can see we have a little box shadow around it you can mess with these values if you want actually this should be what did i do there 0.17 there we go alright so box shadow is kind of tricky but I think that that that looks fine all right so let's see what else let's do the close button I don't want the close button to just be chilling right at the top here I want it to go over to the side here so we're gonna have to float that so remember that has a class of close BTN at least I think let's check yeah close BTN and we're gonna change the color of it to lighter gray ccc and let's float it to the right let's change the font size so we'll say font size we'll change it to 30 pixels make it a little bigger and that should be good let's save and now that looks much better so let's also do a hover State and also when when we when we hover over it I want the cursor to change because right now it's not changing well it changes to two that I want to change it to a pointer to let the user know that they can actually click there so we'll say close button hover and then we also want the focus States so we're gonna say close button colon focus alright and then what we're gonna do is we'll change the color of it to let's say black and let's change the text decoration make let's make sure there's no underline set that to none and then let's set the cursor I'll set the cursor to a pointer and an extra u in there all right so let's save that and now we hover over it you'll see it it goes black and also we get that we get the cursor at the pointer I mean alright so nothing it's not gonna work yet because we haven't added any JavaScript but we're just getting the the modal setup as far as how it looks alright so that looks pretty good I think we're gonna go with that so now what we'll do is will it will uncomment our display:none and save and now you'll see that it's completely gone so now is where we enter the JavaScript so that when we click on this it actually shows up so let's go to our main J s and from here we want to basically just get a bunch of the elements and put them in variables so let's say we want to get the modal element and we're gonna set a variable called model model modal and let's set that to document dot get element by D and we want to get the ID of simple modal all right we also want to get the open modal button so create a variable called modal BTN set it to document dot get element by ID and I believe we also gave it an ID of modal BTN to get modal BTN so let's put that in there all right and then last thing we want to get is the close button okay so we'll create a variable called close BTN and set it to document dot get element by ID close BTN all right so we have our variables now we want to create our events so let's listen for a click on the button on the modal button so we'll take that variable modal BTN right and we're going to say add event listener and we want to add a click event I want to listen for a click event when that happens we're going to call a function called open modal okay so we'll just put that in there and then we'll create our function so function open modal all right and then this is going to be very very easy all we want to do is take that display value or is it right here the modal display take it from none and set it to block okay when we click this button and just to test out make sure that this is actually running let's say console.log 1 2 3 and we'll go over here and hit f12 make sure you're on your console hit the button and you'll see 1 2 3 all right so to change the style we simply need to take our modal and set the style and then we want to set the display equal to block all right save that let's click it and there it is alright now nothing else is gonna work we haven't set that up yet but it does in fact open it okay so next thing we want to do is we want to we want to add an event listener further close okay so we have our closed button here let's go ahead and copy this let's say listen for open click and then we'll say listen for closed click okay now this is going to be on the close button this event listener so we're gonna change this to close BTN okay listen for a click and then we're gonna call closed modal okay now we'll go down here let's copy this we'll say function to close modal change the name and I bet you can guess what we're gonna do here we're gonna just set this back to none all right let's save it let's see what I do wrong cannot read property out of it listener of no why is this now close BTN why is that now Oh document dot get element by D close button what the hell oh I put a class of close button guys hold on let me let me look at what I did here initially oh oh you know what instead of using get element by ID I didn't mean to do that we want to grab it by its its class name so we're gonna say get element or get elements by class name all right now what this this does get element by class name by the way I'm creating a vanilla JavaScript course on udemy and we're gonna this is the kind of stuff we're going to be going over but this actually will get us an array or a collection of classes with this close button so what we want to do is just add in some brackets and say we want the first one even though there's only one it's still going to return that collection or that array so we need to specify that we want that first one all right and then let's save and now that error should go away okay so let's go ahead and click and let's click the close button and it goes away all right now I want to also make it so that if we click outside of it it goes away so for that we're gonna actually add an event listener to the window let's say outside click or you know we'll say listen for outside click so we're actually gonna take the window and say add event listener and we're gonna listen for click and we're gonna call a function called but I call it click outside okay which is going to be very similar to closed modal so I'm going to copy that we'll say function to close modal if outside click and then we'll change the name of this to outside click and then all we're going to do is make sure that the target is equal to modal all right so we're going to pass in an event parameter and we're going to put in an if statement and wrap this around it like that and we're going to say if e dot target is equal to what nope is equal to modal okay a modal is being that you know the dark area around so we want to check that so let's go ahead and save click outside is not defined always it outside click alright let's change this to outside click and save all right so we'll try it out we click outside of it good but if we click in the modal that's fine nothing happens click the X button and it closes alright so that's it for the the basic modal now what I want to do is just give you some options to make it look a little better with a header and footer I also want to add a little bit of animation because right now if I click it it just it just pops up it just appears it goes from display:none to display:block so I'm gonna add a little bit of CSS animation here using a keyframe okay and this is don't let that intimidate you if you don't know about keyframes this is gonna be very very simple so let's go to the modal content alright we're gonna go to the bottom here and we're gonna say animation - name and we can name this whatever we want I'm just going to call it modal let's just call it modal open alright and then we want to say animation - duration which I want to do let's say one second okay and you can change that you could do 0.5 seconds or whatever you want all right so now that we did that we need to go and create our keyframe we're gonna do that at the bottom here we'll say at keyframes and remember what we called it modal open okay and then we're going to just put in here we're gonna say from okay so from the initial state we're going to say opacity opacity of 0 to opacity of 1 okay so that's all we're doing is we're animating the the opacity from from 0 to 1 in one second because that's what we set right here for the duration so let's save let's click it and you'll see that it'll actually fade in in one second and you can change that duration to whatever you want if I were to put let's say 3 seconds and click it'll take 3 seconds all right I'm just gonna leave it at 1 no so that's that now let's go ahead and let's add the mark-up I'm going to just create a new file let's see we'll create a new file and we'll just call it index 2 dot HTML and then I'm just gonna copy everything that's in index.html and save and then let's see if we can navigate to index 2 dot HTML okay it's the same exact thing which is good and then we're just going to edit the mark-up a little all right so what we'll do is inside the content we're also going to have a header so let's say a div with the ID or I'm sorry with the class of modal - header what okay and then in this header is where we're actually gonna put the close button so I'm going to take the span and cut it out and put it inside the header and then right under the span we're gonna put an h2 and we'll just say modal header alright so if I save it it's gonna look like that so far so we're also gonna have a modal body so right under the header actually we'll wrap this paragraph right here let's say div class modal - body and then we'll just wrap that and then I'm just gonna put another paragraph in below it and let's just put some sample text I'll just say lorem tab which will just give us some dummy text alright and then under the modal body we're gonna put a footer so let's put a class of modal - footer and in the footer we're just gonna have an h3 so say h3 and we're gonna say modal footer and save and that's what its gonna look like so now we need to just change up our styling a little bit so let's go ahead and go to our style sheet let's I should probably create another style sheet as well because yeah let's do that we'll create a style - dot CSS I just I want you guys to have the simple one and then also the one with the header and the footer so I'm just gonna copy everything from style dot CSS and put it in there alright and then I'll close up style.css and also index.html and let's go back into index to HTML and just change the reference to go to style - dot CSS alright and it should still work the same way so now let's go to style - dot CSS and let's add some stuff in here so the header I'm gonna put right below the content so it's a modal modal header and we're gonna add let's see so first of all I want to take the padding away from going around the whole content alright so if we go to modal content let's take away that padding of 20 pixels okay so it's gonna look like this and then in the header what we'll do is let's add a background of coral okay we'll do a background of coral and then we'll add our own padding here of 15 pixels and let's set the color to white alright so now it's gonna look like this I want to take the initial margin away from the h2 so what I'm gonna do is go right above that and say modal - header h2 and we'll say margin zero there we go alright because of what it was doing it was adding that margin on top of the padding making it just way too much all right let's also change the color of the X now that it's on the coral background I want it to be white so we'll just go to our close button which is right here and we'll just say color white all right now the mod the modal body we now want to have some padding so let's go ahead and do that so we'll go right under the header and say modal body and we'll set padding what I do for the body 10 top and bottom 20 on the sides there we go now I also want to remove the initial margin for the the footer which is an h3 was it in h3 yeah h3 so we'll just go and add right here to where we did the header and the header h2 and we'll say modal - footer h3 and also set that margin to 0 all right and then what we're gonna do is style the footer so we'll say modal - footer we're gonna add a background let's see background of coral the white does that background of coral let's also add 10 pixels padding and let's set the color to white and let's align let's align to the center so text align Center and save and there's our footer all right so that's gonna be it guys let's go ahead and if we make this bigger you'll see it's always gonna stay it's what I do 70% I believe but you can change that if you want you can also make it a fixed fixed width so let's say we wanted to do with I don't know 400 pixels and save so it's always gonna be 400 pixels okay so you may want that but it's it's completely up to you all right I'm just gonna set it back to 70 all right so hopefully you guys enjoyed this like I said I'm creating a vanilla JavaScript course on udemy and we're gonna be doing stuff like this I know this had quite a bit of CSS but you know if you wanted to not look horrendous then you're gonna need to add some CSS but yeah so that's it guys hopefully you enjoyed it please like if he did please subscribe if you're not and I will see you next time hey guys I've just created a new discord server that's open to the public the goal is to have a place where people can go to help each other out for programming issues as well as just a place to discuss new ideas and get feedback I also check in daily there's a channel to request videos on YouTube and much more so if you want to check it out just go to discord GG slash travesty media

Channel: Traversy Media

Views: 231,337

Keywords: modal, javascript modal, create a modal, css modal, bootstrap modal, javascript, css, html, html modal, html popup, javascript popup

Id: 6ophW7Ask_0

Length: 31min 27sec (1887 seconds)

Published: Mon Sep 04 2017