Create a Simple Popup Modal

hey guys welcome back to another video in this video we're gonna be creating a simple modal pople okay guys so this is what we're actually creating today so as you can see I've built this web page out for you already so you don't have to build an actual web page to see this working and when we click on the click me we get this little pop-up with this little farming side there obviously doesn't send we're not interested in doing that today and you can click the cross and it can disappear so obviously with this modal it can be anything it could just be text it's totally up to you I'm just showing you how to make this pop-up so the first thing we want to do is we want to create so I'll show you where we are now in Co pen we're just on this standard page we click to click me and it doesn't do anything so the first thing we actually want to do is create this sort of semi-transparent black background and the way we do that if you go to the bottom of our HTML to the modal section and let's create a div called and we're going to use Emmet so if you haven't used it before it just creates devs you can create other things as well so if we say dot BG dash modal then hit tab and it knows cuz we just use dot that is from the create a div and the dot is a class so it gives it the class name of BG modal so there you go again so BG modal let's jump down to the bottom of the CSS and let's start styling that modal them so we're gonna say dot BG - modal and we're gonna say right so it needs to be the full width oops full width 100% and the full height because it covers the whole of the background on the % and we also want it to be a background color and you might think that to make a semi-transparent background color we'd do this so background color black and then you might think we do a pay city 0.7 or something like that zero to one for a pasty zero being totally see-through one being solid color now we also need to tell that background model to lay over the top of the content because at the moment is flowing in the document so we can say position so say in position this Dave absolutely and when you say absolute you say where this is gonna be now cuz it's not flowing in the document so we can say I'm top so we want to start at the top zero right and there you go you can see it's slightly see-through it's actually kind of what we want but the problem with this method is when we go back to our HTML to add the content so this white box what it will do is this so I'll make another div container so dot modal stash contents our content hit tab and now we can style this modal content right so we're gonna say dot modal - content we're gonna say we want the width to be like 300 pixels something like that oops 300 PP X 300 pixels and we want the height to be nice a height for younger pixels let's say the width 500 pixels now we need to give it a background color background color of that white because it's a solid white color and now you can see we haven't said give this modal and a pacer and you can't go and say opacity one - give it all up AC doesn't work like that inhabits from the containers within right so if I delete that PC one there and delete the opacity from the BG background I'll show you how you would go about doing this so though the child elements don't in have it the AC and you do that by using rgba on the actual color it's a red green blue alpha so alpha is the OPC channel so we want to say we want zero red we also want zero green zero blue and we want 0.7 of opacity and there you go now it's a pit opacity is right and the actual contents modal is actually solid color so let's position this modal shall we so we actually want what we can do is we can position its Center by using flexbox so if we jump on to the BG modal to the background and let's say display flex on this because now this is the Flex parent and now we can say okay what do you want to do with all the elements inside of me and I want to say okay we want you to be justify content center so we want you to be centralized horizontally and we also want you to be centralized vertically so aligned items Center this is a really cool and quick way of sensing things in a sense of the page so there we go we're in the center so we're looking good the modal contents let's do some border radius lot of alias four pixels to make it look a little bit cool right now what do we need to do let's add some content so we want to add this little icon and these input fields in this button so let's do that by going in here and typing IMG and again with Emmet you can just type IMG then hit the hit the tab button and it will actually fill it in and get ready to accept a sauce so I'm just gonna copy a link here you can feel free to copy this link as well I'll leave it in the description as well so you can just copy and paste out there so the IMG 100 there and we want to it's not in the sensor so shall we deal with that Center now yeah let's steal that sensor now so we can say in our modal BG we can actually no we don't yeah yeah no let's doing the modal content so in the modal contents we can just text - align Center right so everything inside here is centralized we can give some pad into this as well cause it's right at the top at the moment so let's give a padding of 20 pixels give padding top left and right and bottom as well and let's go back to our HTML so after the IMG tag let's put in some just put in a farm so he type farm and tab we don't need any action which leave action blank so then we can say input tab type text is fine input tab type text is fine well let's give these placeholders so placeholder inside the input tag and you'll see in a minute so when I type the name here you'll see on the left hand side that fills in the middle for us okay so let's do second one let's say email place holder equals e - mail so it's looking pretty good then we want the submit button as well so we just made this out of an anchor tag so you say a tab and we already have the a tag for the click Me button is already got styling on it and the style is class equals button right you can see something there so we just need to type in between the a tags as type in submits and the old givers submit inside there there you go right we're all on one line and we want to kind of be on a couple of separate lines so let's jump to the bottom of our CSS and type in input so we're targeting these input fields and let's say we want the width of these to be like 50 percent right so now there's not enough space on the one line because there's padding as well remember so it's from the email underneath but in this submit is also next to the email and that is because the the import we want to make the input a block level element so basically block level elements say yo this whole line is mine whereas in line elements say hey I can just go along with the flow of things you can come after me that's fine so the way we do that is we say display and I think we need to do yeah display block and you'll see now right so on its online but these are now to the left right and the reason that is is because we have to do margin margin:0 auto to center thing so we want to say don't have any margin at the top but your left and your right want to be automatic so if they're automatic they're the same so it has to work out themselves so in fact let's give a little bit of margin so I showed it I'll show you this margin:0 auto on these now you see how they're together so the name the bottom of the name is in line with the top of the email so if you change 0 to say 15 pixels it's now gonna put space in between those guys right so looking pretty good here actually so let's now we need to work out this cross don't we this law thing so we can just jump back in here and we can create a close button so let's do it just above our image tag here I'm just going to create a div and it's just call it dot close right in hit tab and instead of putting an X which you think you might do X's you can see there just above just above my image exes are actually a perfect cross so the best way to do it is and to use the plus symbol and you thinking well that's not the right orientation and we will twist it now in the CSS but let's first as first go into our CSS dot close because now targeting that close class to style it we need to actually give it a position so we need to take out a Florida document again the same position:absolute right there you can see it's move to the left now as soon as I say top zero it's gonna actually think we're top zero of the page so it'll actually jump out of here and it's moved actually write a peek in barely sees up here and that's because if phynx is taking its position in from that modal there modal background instead of the modal contents so the way we make it think top zero we mean top zero the modal contents right so we've got to mode or content and we say position relative on the modal contents and what that does is it basically says hey you can position yourself relative to me so if your absolute I'm your closest parent so position absolutely to me and there you go is right up there so it's not quite in the right position wants to be on the right so I say right 14 pixels and that should move it to the right that's a little small so I changed on I say font - size and a 42 pixels I guess if I look in a bit better let's say let's now do the rotation so we say trance transform I'm gonna say rotate and in parenthesis we're going to say two degrees so you can say 45 deg 45 degrees rotate and there you go and that's looking like a proper close button now rather than the X which is not quite symmetrical right okay so I think that's pretty good you know we can do we can do a few things like let's see cursor:pointer so it's actually a pointer hand when we hover over it so you know it's a close and things like that well we want Bobby at the moment so now let's jump into the JavaScript shell because now it's always open so we don't want it to start open do we so we want it to be minimize effectively at the beginning so you want to jump to the modal BG modal because if you make this display hidden it will hide all these children elements as well right so upside not display you don't display none it will hide all these child elements still not working when you click to click me so this is time for JavaScript so what we want to do is we want to grab this bond and basically say when your clicked on you do something so let's do that documents so look on page for an element's by ID so an element with the ID of button we're going to say right so does output an have the ID yes it does so there we go so look on the page for an element with the ID of button and we're gonna make you clickable so add event.listen and what type of event listener is it going to be it's gonna be a click so basically now when you're clicked you can do something so function is to do something so parentheses and now we're in the function so basically on the page find an element with the class of button the idea button dot add eventlistener parentheses click comma fun right and now we can do something and now we can say go to the documents query selector so this is basically saying find a selector find a tag with and we're gonna say dot modal dot modal - BG so using dot because it needs to know if it's a class or an ID because we're using query selector so go on the page find lot modal BG and then I want you to change to display - flex cuz it's displaying on the way you do that is you say dance style so basically going to the style sheet I mean line style dot style dot display so I want you to change the style and style I want you to change its display and now I want you to change that display to flex right then parenthesis so when I click on this it doesn't do anything why doesn't it do anything dot style up this play because flex click add event listener document dot get element iid have I called it modal bheegi bheegi modal like so I'm gonna go here and change this around to BG dash modal right so now I'll quickly save that when I click me there we go we're open but we can't close it because we haven't had added that event listener so let's add the close function to it so just underneath that function that I'm an event listener we're gonna create in the one that's called document darts and we've got a query selector again so query selector and we're gonna look for something with a class of dot close right so that's the close bond so go into the document and find dot clothes but something with a class of duck close and don't add the events event listener to add an event listen to it same again click write and create a function so come a function parentheses curly brackets fish with semicolon and now what we wanted to do is we wanted to do with the opposite so we want to then say grabbed a document dot query select R and we want it to grab dot was it dot b t you have dot BG dash modal so grab that modal again and change the style property called display dot style dot display change that to none right so now get a quick save when I click on it should open because that is now style display flex when I click the X that is now style display:none so now we have a working modal right open close okay guys there you have it I hope that was nice and quick nice simple and you guys could understand that please let me know what you think about the video comment like subscribe all of that I'm trying to make these really quick tutorial videos so you're not stuck your computer for too long and trying to explain them really in-depth as well with these little things so like I said I hope you enjoyed that guys and feel free to follow me on instagram richard codes and all that stuff so yeah I hope you guys have a good day and I'll see you guys soon you

Channel: Richard Middleton

Views: 267,662

Keywords: html, html5, css, css3, javascript, js, code, coding, youtube, codepen, RichardCodes, Richard codes, Richard Middleton, Team treehouse, freecodecamp, codecademy, coding tutorials, how to, software developer, programming, learn to code, create a modal, create a modal in html css and javascript, how to create a popup, how to create a modal, popup, modal, modal popup, popup modal, how to create a popup modal

Id: gLWIYk0Sd38

Length: 19min 37sec (1177 seconds)

Published: Thu Mar 08 2018

Reddit Comments

[u/Nezteb]

http://explodal.com/