Build a Custom Modal using HTML CSS & JavaScript

[Music] hey how's going all your web developers out there in today's video we're going to create this model right here actually custom model using only html css and of course javascript so if you're excited for this video then please click that thumbs up button in order to help this video get some traction okay so let's see how the project looks and what we're actually going to go through in order to create this custom model okay so we're going to start by creating a simple button and if we click on it then the model will appear of course we're going to use a couple of animations so this is pretty similar to how a bootstrap model looks actually i i did inspire myself a bit from a bootstrap model so in order to create this we're going to use custom button that we're going to create in css actually i used sas to to write the code for this but as you know then it compiles to regular css i'm only going to write the regular css now you will find the entire code down in the description below as always on my blog page but if you wish for me to create this using sas in the future then please leave a comment in the comment section below with a created using says so when we as i said when we click on the button we're going to get our model to appear it's going to have a bit of an animation then we have three options now these three options are click events that are in the html in the generated html so the functions that are actually in the generated html are going to look to either close the model decline the model or accept the model but if we click on accept then a new model will appear so we're actually creating two models and we can either go back to the initial model this actually deletes the first model and creates the the deletes the second model and creates the first model back and or we can accept and close up this model and then we're going to be sent a new page hey like this video if you like okay so i think that's this is i think this being said we can jump into the project but before we do please subscribe to the channel if you're new here because we post videos like this on a regular basis actually on a weekly basis right now so please subscribe to the channel if you're not already subscribed and hit that notification bell in order to get notified wherever i post new videos like this so let's get into the project okay so let me just hit hit the refresh on our finished project and let's just open it up in visual studio so just create the folder open it up in visual studio code you can call it model or wherever you wish so let's create here a index.html file now let's start with a boilerplate let's link up our future css link style.css css and also a future javascript file so script and i'm going to call this model dot js okay let's create our css file style.sc cscss and also javascript file to go [Music] modal.js okay we got everything working here let's open up using live server and there we go empty page i'm going to also open up the console because we are going to use it later on so not source console there we go and let's go let's see javascript javascript console.log let's just type in here a log to verify that we're locked linked up and there we go there's a console i don't need user go away boom okay so first things first let's go back into our html let's create let's give this a title custom model down in our body we're going to create an h1 i'm going to use really often emmet here so i'm going to create an h1 uh with cos title custom or dell close it up hit enter underneath our h1 as you know what i'm going to wrap everything into a container so class container and to move this up here or h1 after h1 let's create a button and this is going to say click me okay so let's go the project there we go we have a button we have our custom model now we do have it in a container class so let me style this a bit this is going to be actually exactly as a bootstrap style so let's go into css and first of all let's do a reset this is the complete page reset let's reset our margin set them to zero we set up headings set them to zero and of course everything will be a border box a box sizing of border box okay now i'm also going to use a roboto font on this from google fonts so let's go to google fonts and i'm going to use roboto so click on roboto get uh i use the 400 style so click get style import because i'm going to import it into the css import it right after i reset and then also select the font family off roboto san serif go down here get the body tag and boom we should have now roboto yay okay next up let's style our containers so i'm going to grab onto our container and i'm going to set our width to 1 000 pixels and set the max width to 100 let's set a padding of let's say zero top and bottom and 20 pixels left and right and then a margin of top and bottom 0 and left and right are so i'm going to push everything to the middle let's also set the text align to the center and there we go okay i'm going to also increase our h1 a bit so let's do a h1 with the font size of 5 ram and then a margin to the top and bottom of 5 ram so i'm going to push it down and then left and right auto okay so we have margin to our to our button now and also to the top now we do have a button so let's also style this button i'm going to use a regular style for four buttons actually the style that i always use so in this case let's grab let's create a btn class so exactly as in bootstrap we have a general btn class general button class and then we're going to extend it to let's say success a danger and so forth so on button which we're going to have the same style as the initial button but different background colors and different color for the text okay so let's do a display display for the button as inline block then we're going to increase the font size to 500 we're going to set the line height to 1.5 the initial text color is going to be a pretty much darker color so i'm going to use it 2 1 2 5 2 9 hexadecimal color there's the text align will always be in the center the text decoration will be none so if i have an anchor tag in there it's not going to show i'm going to set the vertical alignment to middle and let's also set the cursor to pointer now we're not done yet because i want the users basically when it's selected user select to be none and the background color this is very important the initial background color is going to be transparent because this is going to be because this is going to be regulated from whatever second class i'm going to give whatever extension class i'm going to give it now these are the basic stylings everything else i'm just going to copy in and just go over it i don't want this video to be extremely long i much rather concentrate on the on the javascript part for this so i'm going to set the border to one pixel solid transparent i'm going to take up the border later on for my extension classes we're going to have padding top and bottom 0 0.4375 and then left and right 75. now uh 0.75 font size is going to be one ram border radius it's going to be 0.25 grams is going to mean there's going to be a bit it's going to be have just a bit of border radius and then we're going to use transitions for different things so for example for color for background color for border color and box shadow okay and also going to give it a bit of a box shadow of um five pixels one pixel and a dark color and then a 0.3 um alpha okay now as i said i'm going to also extend this so if we have a class of btn-6s is normally a red color then i'm going to use i'm just going to copy this in a background color of hexadecimal then as i said the code is down in the description below so this is not the important part what is much much more important is actually understanding the logic behind the javascript so how we're going to insert this in our dom then we're going to have a cancel color a close color or close class and then two more things so when i'm uh when i'm targeting my button it's in an active state active means when we click on it then i want to have a transform of scale of 0.98 so only when i click on it and also to have a box shadow of none so when it's clicked it's going to it's going to have an effect as if it would be pressed in okay now when i'm hovering all my buttons i want it to have an opacity of 0.9 okay and that's basically it so let's see now how a button looks if we also assign it those classes so go back to the html let's say class beat the answer the first class and then beat the n let's say success and now we're going to get this green button yay and you can see if i click on it the shadow disappears and also it scales down just a tinge so we're done with this part now let's create our model so it doesn't actually matter where we where you insert a model but for styling purposes because i'm first of all i'm going to create it style it and then delete it from our html so i'm going to create it within our html so the model is going to be first of all wrapped into a model class that is going to have a model container so another class of model dash container after that we're going to have the model content which is basically let me just show you the model content is the header the body and the footer okay so these three are going to be in the header in the model content is the content of the model so let's do this class of model content and as i said it's going to include a model dash header plus a model so these are all classes don't forget to put the dot in there classes model header then class of model dash body plus another class of model dash footer okay so if i hit enter i'm going to get within the model content these three divs now the model header let me go back to our finished project i'm going to close up our font also the model header is going to contain the text and then the button the closing button on the right side so this is actually a span tag so after text which is first of all model it's just going to be a text and then a span tag spam and within here we're going to just have an x but i'm going to convert this into a class i'm going to give sorry about that i'm going to give this pant a class of ptn and ptn dash close okay so if i do this then i can't see anything oh there we go there's a model title and uh closing button which is already styled because we already have styled our button now for the model body down here i'm just going to create a lauren ibsen that's it now for footer the sign of finish project we had we had we had two buttons so let's insert them using a button tag button the class of btn and btn close it's going to be no [Music] actually not closed it's going to be i use something else here cancel so we're going to use the cancer class and after that we're going to have another button tag with the class of ptnbtn success it's going to be accept okay so let's see there we go we have our two buttons we have a text we have everything now we still need to to style our model so let's go back to css and let's start the general class of model first of all hotel and now the model is going to let me show you this so as you can see it's up here kind of in the center of the page and also if i make this smallest it's completely responsive it's going to stay there now we and also we can click the background so i'm going to position this absolute so position absolute then we're going to position it to the top zero percent and left zero percent now this class is not actually the model itself but it's everything that you see here it's the entire the entire viewport so this right here this is only the container it's not the model itself as you can always see it is placed up here so what we need to do now is display those as block we're going to set its box size into border box and we're going to place it over the entire content so let's do a z index of 1000 now i wanted to have the entire height of the viewport so i'm going to set it to 100 viewport heights i'm going to set the overflow overflow for first of all for the x-axis so overflow x-axis as hidden but for the y-axis overflow y-axis we're going to set it as auto now i don't want to have any kind of outline so i'm going to set it as 0 and i'm also going to give it a background color of a rgba and let's set the alpha to 0.2 and this is going to make a gray color as an overlay over everything so i can't click the the click me button anymore because we have this set index as of 1000 so it's over everything over our entire content now as you saw in our finished project when it comes in it has a bit of an animation effect so let's create that animation by creating an animation and let's also go outside and create our animation using keyframe let's say we're going to call this fade in now it's going to be a pretty simple animation so it's going to start at zero percent with the opacity of zero and it's going to end at 100 with a opacity of one so let's use our animation here fade our keyframe fade in is going to take 0.3 seconds and it's going to have the effect of ease okay now let's continue on and style our model model container so let's grab onto the class of model dash container i'm going to position it now relative within our model position relative we're going to set its max width to 500 pixels set its margins to 1.75 ram top and bottom and auto left and right i'm also going to give the box shadow of 0 0 15 pixels 2 pixels and rgba of 0.2 there we go okay next up let's take care of a model content so this is going to be model content we're going to position this also relative we're going to display it as flex i'm going to set the flex direction as a column so if you take a look at our finished project this is the flex direction in a column not in a row the width is going to be 100 percent we need to have no pointer event so set the pointer event to none let's give it a background color of a fff hexadecimal color and a background clip tool actually donate this a border radius of 0.3 ram okay and let's just take out the outline outline okay so there's a container now the rest of the code i'm going to copy because you only need the header the body so let's do first of all the header you have to go over it so header display flex again the as you can see the flex direction is now in the column because it's set automatically to column the flex shrink is set to zero the alignment of the items is center just go ahead justify continue space between so we're going to have space between our elements so within a title and between the button going to have a padding top of one and left and right of also one ram and this could actually be changed to one and one so border to the bottom gonna have a bit of a border you can see right here of one pixel solid and a hexadecimal color of gray then a bit of a background color which is a little darker going to have some calculations to the top and to the top left and top right border radius because up here and up here we have a border radius but down here we don't have anymore okay so let me also check [Music] i think i forgot the width so width i was going to take up 100 sorry about that and now it's set to the center okay so for the model class the general model class okay next up let's move on to our body and again pretty simple just going to set it as position relative i'm going to give it a bit of a padding all around line height of one and also the flex going to set one one and auto now the last one is going to be our model footer which is going to be displayed as flex we're going to set it as flexwrap flash shrink is going to be set to zero the alignment of the items will be centered and we're going to justify the content to the flex end so the buttons are going to be at the end of our flex here all right so okay so that's basically it for the entire styling now let's move on to some logic i'm going to comment out this console log and first of all i'm going to grab onto a body tag now let's use a const and assign the body by grab onto the document dot query selector and we're going to grab on to the body tag so the idea here is that when we click on let's go to our finished project when we click on this button our model should appear now how can we do this well we're going to launch it through a function function so i'm going to create a function now there are more than one ways to do this we could either grab onto that button in our javascript which is also an option but i'm going to do something else i'm going to first of all create a function of launch model so launch model and i'm just going to console.log let's say our body okay so this body tag right here now how can we assign this function to the button without grabbing onto the button in the dom okay we can actually assign it in our html so if i would go here there's a button there's a button right after class i'm going to say on click so i'm not going to use get button and then add an event listener i'm going to use the function right within here so on click we're going to use the function of launch model and let's see what will happen so let's go into the console and first of all you know what i'm going to comment out our model so let's make this smaller and comment it out so let's see what happens if i click on my button just console logged up entire body pretty cool okay so this means that when i click on the button in our html javascript is going to execute this function pretty cool now let's create an element so this means that i have access to my body to my body tag and this also means that i could insert elements into our body now for this we need to create first one element so let's use a let keyword and let variable and let's create models i'm going to assign it to a document.createelement and we're going to create a model tag there are no such tags in uh html but we can create one we can just create one now the actual creation of the model i'm going to use a function here so when the button is clicked the element will be created and for this we're going to call upon a function let's call it create model okay and this function is going to take in another function which is actually creating the element itself so let's type in here model and it's also a function so this function is going to launch this function so let's create a model function going to go outside of this function and let's see here uh type in a comment of create model and i'm just going to assign it to a const of model i'm going to use here a arrow function and the only thing then this is going to return we can actually don't need this i'm just going to return between backticks so let's do backticks or element now this is pretty simple i already have created it here so i'm going to go back to html to our html file copy it and paste it in here and that's all we need to do so when a button will be clicked then the element will be created and then a function will be called which is going to create which is going to call upon this error function is going to create this element now let's create this function because this create model function does not exist so let's go into in here let's say create model and as you can see this function is going to take an argument in other functions so let's say that this is going to be pass in model now i'm doing this because this function discrete model can create whatever model is going to be passed in here and as you saw in our finished project we do have two models okay so first one being the initial model and then the next one so let's go back to our code when something is passed in here then the create model dot in html is going to be assigned to whatever is going to pass in this function okay so hope this is clear now after that we're going to grab on to our body because this function so we have our body up here in a global scope and now we're going to append as a child the created model okay so basically now if i click on click me then we have a problem launch model is not defined oh yeah because i use the same notation so create model func let's say and you are also the create model func okay sorry about that okay so this is basically the function this is the function and this is the element that is created so now if we click on click me there we go model has the model has been created so we we have created our model now we need to close our model somehow let's go back and we're going to go right after our model and let's say close model function now when we're closing our model we're not actually closing it it's not staying in our dom we're actually removing it from our dots so let's create a function let's let's go ahead and create a const i'm going to call this remove model and to use an error function again so let's assign this to arrow function and first of all let me show you something so this function is going to be called upon when we close we wish to close an element so again we need a click event so we're going to close our model from either this button this button and also our accept button but it's a bit different the accept button now first of all let's go to the closing button up here now we can actually insert here function let's say that another we can actually listen for a event within this button so again on click going to listen for this remove modal function and let's say when this happens then do a console log of string of close so let's see what will happen if we create a model and click on the x button well nothing happens and why is this it's a pretty simple explanation for this and has to do something with the scope in this case in the first case the element exists within the dom and when we click on it the element does not disappear stays within the dom so it's cl it's scope because it didn't grab on to the button and actually close the css because it didn't grab onto the button the scope is still global now in this case it's not global so what we can do but there's a bit of a difference between selecting something from the dom and using a click event within the element let me show you what the difference is if i type in here the event i want to log now my event now if i open this up and click on it undefine now why is this undefined why is the event of undefined well because it is now in the shadow dom so in order to to have access to this i need to use the this keyword now this refers to this right here so now if i cancel lock this and the event yay there's a button okay if i would have grabbed onto the button within the dom so if i would have done something like i think i need to give it an id uh id that's good it's the easy way id of close and then i would say when i click on this button then integrate the const of close ptn then document document quiz selector so let's get back to the project we were here we were here we will we wanted to remove the model and we said that we can only access this button this spam button if we had this keyword in our function now let me also show you something i can i could access this without having this keyword but i would need to create the cons and grab onto the element itself so i will give it a id of close okay so give the a a id of close and grab on to this id what this means is that when cause let's call this close uh btn i'm going to go into the document dot query selector and we're going to select the id the id of close okay so basically uh let's also console.log it boom and boom so two things should happen first of all if i go now back to the project open up model click on close two things happen first of all the event is now unidentified because he doesn't know where it exists but because i selected the button now it's giving me the button okay so i could target this this way but i don't want to do this because this is specifically to this model model i still don't know how to pronounce it correctly so specifically to this model that means if i would create the next one it it also must have an id and so forth so on so that is why it's better to use event listener and to listen to the event targeted on this specific model a model so let's go back let's um i'm going to leave it actually actually in here and i'm going to use that this keyword and also going to hey so it's this and i'm also going to leave the id in here so you can have it in your in your code then two let's continue on what do i want to do uh let me check my nose so we got oh yeah we want to remove we want to remove the element so we got the event uh now let me also show you what happens when when now i got the event if i click on this the span the the button itself is selected now i want throughout clicking this button to remove the entire model so i can now navigate out and navigate up the dom with using for example a parent element parent element of this element of this uh event so if i click now on my close button that is selecting the div now we have to navigate up until we get the model itself so it's going to be parent parent parent i'm going to show you what it is actually so i'm going to exactly as i did here const model and assign it so create a variable and assign the event span parent parameters the fourth parent i'm telling you because i already did it so event dot parent and i'm going to copy the keyword parent and paste it in dot parent dot oh dot parent and dot parent again so i got now the parent element which is the model itself the model itself and i can do like model dot remove remove move element boom what this means is if i click on it it's removing the model simple as that okay it's gone now there's another method i'm actually going to comment this out because the model now exists but it only works if i have the event listener in it because the model now exists i could do something like const model and assign it to document dot quiz selector i'm going to select the only model that exists because if you think about it only one model can exist per prevent so model okay so let me see what happens if i console log the model if i click here and there we go selecting the model okay now let me also comment this out and let's see if we take out so basically i could do now model dot remove exactly the same thing remove and we're going to remove the model element and it should boom remove it okay now what will happen you can see we don't no longer need the event or take out the event if i click on it it still works and also if i remove this keyword from our function and click on it it still works because we are now selecting from the dom the created model and we're selecting it after we have created created it created so it works as you can see you don't need the this keyword and also if we create another model it should work so i'm going to comment this out we have the model we can remove the model so i could basically use this function this function right here boom also on no not in the class sorry about that after the class paste it in here so if i open up my model what just happened i have here too many one too many spaces where's my bottom bottom button button class button no what is happening model what okay some messed up here somewhere let me let me try this again boom there we go it closes so i can now take the function on click oh there we go unclick go after the class paste it in and now it should work okay so also if i click on no to remove the model it basically go back now we want to uh open a new model so we need to create one actually so i'm going to go after this model and copy the first one i'm going to type in here comment of um info model info model paste this in and change the model to info and fo okay so basically we don't need everything that is in the first model so in the body we're just going to copy in replace the alarm if somebody you have accepted the terms and conditions uh for the title i'm going to replace this with terms and conditions boom and [Music] that's it for this we don't need or we don't need the accept button let me check the finished project so we have accepted it and we need a yo we need a close button okay so we need our cancel button what else do we need we need a cancel button we need our remove button we don't need this id right here this is just for the previous example in the body we need our footer and within our footer we have our button okay so we could now call upon another model so how can we call upon another model where should we call upon the next model well we should call upon it within this accept button the accept button will now open another model so this means that on click we are going to execute again the function of launch model and again we need this keyword within here in order for frost launch the next model so let's click on it let's click on accept and another model just appeared as you can see well it appears but only makes the screen darker and actually there are models overlapping now so what we could do there's our info model it still launches the same model so we need to kind of create a condition let's condition this model that if the element.id so we need to the event dot id e dot id is equal to accept then then accept this then accept is spelled with two cs and one e then we're going to create a new model again but this time is going to be the model info and else if the id of the event is back then we're going to create the model so the very first model i'm going to pass in here model and this function okay so what does this mean this means that i'm using here this keyword so if this button because we can now call upon the event okay so if this button has the id i'm going to give it the id of accept then we're going to create the model info okay now also if the event of another button has the id of of back which is going to be this one asks you the id of back and we need to do this keyword so if the id is back then we're going to create the previous model so the main model should have called it main model whatever okay so let's try this out so let's click on it let's click on accept and we still have a problem e is not defined just a second and event because it didn't pass the event within our remove boom accept i'll wait a second seen it in our launch i still need it in our launch mode so if the event is accept then create model is not defined what launch model event button listen okay so let me just console log here the string of yes and so when i click on accept okay i'm getting yes but create model is not a function uh create models not a function why do you want to be a function oh because create model function sorry about that boom boom so now it should work okay click on accept yes and there we go there's the next model now if it if it is back then it's closing the model but that's not what we want we actually want that if we click on back then the first the second model should disappear and the first model should appear so it's actually pretty simple all we need to do is when we click on the back button the yeah on the back button is not only going to remove the model but it's also going to create another model so before we even remove it we're going to say a launch model and we're going to also pass in here this keyword and we're going to do it this way so two functions we're first going to launch a model and then we're going to remove the model okay so let's see what happens now click me accept back and it removed the model and it gave me the previous model again so except i'm back okay so let's close oh we got a couple of them so this means that it's not closing the first model so we can go back now and true to zoom the problem is that we should remove the model before we we should first of all remove the model then create the model so let's try this out click me accept is on accept we should also remove the very first model so back is removing the model and this is now cr closing model so this means that we need to go to x to the accept button we are launching a model but we should also after we launched the the second model we should delete the first model so right here remove re move model and we need this keyword okay so let's try this out accept it's removed another model is created if you click on back then this is removed and the previous model is created okay so all we need to do now is take care of this closing button because this closing button will not only close the model but launch a new page yeah a new page actually so let's type in here comment create new page and it's pretty simple we're going to create a function we're going to call it let's call it finish or new page new page and we're going to grab onto the body dot inner html and we're going to assign it to using backticks we're going to give this a div so open close a div with the class the class of container and within this class of container we're going to have an h1 i'm actually going to copy it it's much simpler this way and uh with the fantasma thumbs up i think i don't have 1000 oh yeah we should use this function so new page we need to launch it up here in a second button so after we're removing the model we're going to also use our function of new page and that's basically it this should work okay click me accept close and like this video oh yeah please like this video if you did like it okay so that's pretty much it for the project so if you enjoyed the project please give it a thumbs up if you did give it a thumbs down if you haven't subscribed to the channel then please consider subscribing and also clicking that notification bell in order to get notified whenever i post new videos like this so with this being said oh also if you have any kind of questions or suggestions leave them in comment section below okay everyone have a nice day hope you enjoyed the project and catch you next time bye bye [Music]

Channel: Norbert BM Web Development

Views: 73

Keywords: Norbert BM Web Development, custom modal, custom modal javascript, custom modal js, build a custom modal using html css and javascript, how to create a modal, how to build a custom modal, learn web development, html, javascript, modal popup, css modal popup, modal

Id: 5oig_FEIcbo

Length: 50min 37sec (3037 seconds)

Published: Wed Oct 13 2021