How To Create A Modal In Javascript and CSS

[Music] hello everybody how are you guys doing today okay so we're gonna continue this JavaScript kind of thing this one's gonna be super simple though so we're gonna focus a bit more on the CSS part on this video but the effect we're gonna want to achieve in this video is basically you're gonna see this on a lot of websites when you scroll down I true up this basic web site so apologize if it doesn't look that great but you're gonna come across a button and when you click that button it's gonna do a model pop up like this without bootstrap without anything just pure simple CSS and a bit of JavaScript so this is what we're gonna try to achieve again we can scroll and it's gonna be fixed here so when we and we cannot click out of this so we have to click here to be done with it all right so let's get going let's start this so I'm gonna delete everything that we have here so far so I think this is pretty much all that we need to delete here and the CSS let's delete these things so we can start fresh from these start delete okay so basically we're just left with this section here and this section and nothing does anything nothing does anything all right so all I have here is a button that's called model button so that's the class I gave it it can add feel free to add any class names but yeah so whatever you have on your page is completely fine this is just a mock-up and at the end of your page we're gonna create the model here so this is pretty much gonna be separate from for from everything that we're doing okay so it doesn't really matter what you have on your page as well you can just do this from where I search right now okay rambling too much let's get going alright so we're gonna have to make a div here and we're gonna call it model beachy I'm gonna get back this later why we need this and in this we're gonna make another class called model this is gonna be the actual box that we're gonna see on the screen all right and in this we can actually start putting in our contents so let's say H to subscribe to our tank okay and then we are gonna have let's say a label here for I don't know let's say name and then an input here type text should do the trick then let's say label for email let's put this like this email and that that should be it input email let's get fancy with this and add name here name email name email there we go and let's have a button that says subscribed and that's all the HTML we need so it's quite straightforward and it's gonna be here now I have a height 100 on this thing on this subscribe section so that's why you're gonna see that hey we're just in case you're wondering like why is d text all the way down here I just added this for space no other particular reason okay so that's the whole that's the whole HTML and we can start in the CSS now alright so the reason why we need this outside model BG is because we want to add a a little opacity on this whole thing so when we click on this button it looks like everything else darkens and fades out so that's the reason so we're gonna stop it select this outside model with model BG here dot model BG and first we're gonna add a position fix to this and then we're gonna add a top zero and left:0 so this just makes everything stick up there left top zero alright this doesn't look so great so far but we're gonna make it nicer we're also gonna add a width 100 so it goes all the way to the end and we're gonna add a height 100 view height so it covers the whole screen here now we're gonna add a background color and we're gonna say here actually we're gonna use our GBA here and we're gonna say zero zero zero because it's black and we're gonna add 0.5 here so it looks all faded out like this now you can mess around with this you can add 0.2 if you think that's too harsh or 0.8 if you're a hardcore 0.9 I like 0.5 I think it looks okay like this it looks it's the perfect balance for me okay alright so we got that now we're gonna have to position this into the center right here so for that we're gonna say display flex just to keep it simple justify con justified content center and then we're gonna say whole line items center so this is gonna align everything in here so yeah that's almost pretty much it and now that we have this we can mess around with this the model so the actual model here and for this we're gonna say background color I just put it white for now there we go and now messing around with the height and the width is quite simple because we have this parent class which indicates that hey the whole screen is covered right so if I put with 50% here it's basically going to take up half of the entire screen for me I found 30% here nice and also the height 30% looks pretty ok now to make these nice we're gonna do display flex again like this we're gonna say justified content center a line item center and it's not looking nice yet so we're gonna say flex Direction column so it doesn't go in the row like this it's gonna go in a column there we go and to make this even nicer we can change the justified content from Center to space around so it gives a bit of space here I'm gonna just copy this font here and the best font in the world just so it looks a bit nicer and for the button I'm just gonna copy these tiles that I gave this button up here again I'm feel free to make your own buttons model button and we're just gonna copy this there alright so yeah there we go now obviously when we joined when we come across this website we don't want to be presented automatically with a subscribe to our thing now right like nobody wants to see that so what we're gonna do is we're gonna go up here to the model BG and we're gonna say visibility:hidden and we're gonna say passive e0 so this is gonna hide everything basically so we're gonna see absolutely nothing right now great now what we want to do in JavaScript is basically add a class to this which is gonna make this thing visible right so I'm gonna create a class that we're gonna add on top of the model BG here and before I do that actually to make it nicer we can add a transition to this so for transition I'm gonna say for visibility is that I'm just copy this because I don't have to write visibility there we are gonna say zero for this because we don't want to animate this at all we just want the opacity but the visibility is actually gonna hide and be content so we cannot like go across it by accident visibility zero and opacity we're gonna transition this with 0.5 s seconds there we go now we can start creating the new class here which is gonna activate I'm just gonna call it background active BG active BG active that's the name fine let's do BG active just active okay that's all we need to know here we're gonna save visibility to visible and we're gonna set opacity to one great all right let's see if I miss something here I don't think I missed anything I think we can start going into the JavaScript all right so open up the JavaScript here we're gonna have to select the button here which we gave a class of model button so we're gonna say variable model button document dot query selector okay this is how we select things and I forgot model button happens every time there we go all right and we also need to select this thing the model BG because we're gonna add this class on top of it so we're gonna say model BG here document query selector we're gonna select the model BG perfect alright so on model button so on the button we want to add a event listener so on click we want something miraculous to happen and what do we want to happen well we want the model BG dot class list so we access all the classes add and we're gonna add our new superbly awesome BG active DG active here let's see are we lucky refresh boom there we go it appears we can't close it right now because I forgot to add these pen to it and so feels bad man but hey we're gonna fix that right now and also we have hey Spotify yeah our transition is not taking place here because I forgot to add D comma 0.5 and fix this little error there we go palpable s okay so I forgot to add the span for this you can keep it simple we can just go here and the model and add a span just say X and we're gonna add a class of model clothes for this good model clothes you can actually take this so now it's here and we can position it up there and the CSS we can say models fan or we can select directly model clothes and here we want to add a position:absolute top 10 right 10 pixels let's let's do like that let's add a font way to it bold now it's not gonna work because we need to position our parent class which is the model to position:relative so let's go back to our CSS and we're gonna save position:relative and magic magic it's gonna show up right where we want it now also we can add a cursor to this pointer so we can actually it looks like we're clicking it good now to close this quite simple we have the model close here I'm just gonna copy this and we're gonna save our model clothes document the query selector model close and we want the same thing to happen model clothes dot add eventlistener and all click function and here we want the same thing here but we want to close it so you can just copy this paste it here and just not add we can do remove and we are done my fellas let's see click perfect it works we cannot click outside of this because we have width height 200 and we either need to fill this out or close it there we go also feel free to add likes animations maybe when you open this up you can have like a small transition like the box coming up a bit make this nicer again feel free to do whatever you want with it so hope you enjoyed this video that should be I it's hope it's pretty simple if you have any questions left make sure to leave it down in the comments thank you for watching and feel free to subscribe if you want to see more of these I'm gonna be back later probably in a few days I'm gonna do more of a lifestyle type of just talking about things and programming web development and things like that but I definitely want to keep up this tutorial kind of series because I really like it but yeah feel free to let me know what you want to see next for me alright guys speaker love you peace [Music]

Channel: Dev Ed

Views: 63,500

Keywords: how to create a modal, how to create a modal in javascript, javascript modal, css modal, web development, web development tutorial, javascript tutorial, css tutorial, dev ed

Id: KjQ8uvAt9kQ

Length: 15min 6sec (906 seconds)

Published: Mon Jun 18 2018