Build a Popup With JavaScript

hello everybody welcome back to web dev simplified ignore the microphone cover in my body I'm trying to get it as close to me as possible to make the audio sound even better in today's video we're going to be creating a Java Script modal so when you click on a button it'll pop up a modal that modal will have some information and then when you click the X button it's going to reduce that modal and go back to being the normal page the modal is going to look really ugly but that's because I'm focusing purely on how to actually create the modal and get it to pop up and disappear so this video can be as short as possible for you let's get started now so here's our basic modal when we click the open modal it will open the X we'll close it and also if we click anywhere outside the modal it'll close it so let's get started creating that I already created the basic files we need I have a style sheet here which just sets our box sizing the border box I have it a script tag and I also have our index file here which links both of our style sheet and our script tag for use later the first thing we need is our button which will open our modal so in here we just say button and we can give it some text of open modal then after our button we want to create the modal here as you can see on the right side so inside of a div which is going to be our container for our modal so we're going to give it a class here which is going to be modal and we'll also give it an ID of modal so that we know what our button needs to open then inside of the modal we have two sections we have our header up here and we have our content in the middle so we need to create two divs for that the first one is going to have a class here of modal header since this is the header of our modal and then we're going to create a second div and this point is going to be the body of our modal so we'll just go to the class of modal body and the modal battle's body is really simple we're just gonna type lorem 80 which will generate 80 random words of lorem ipsum just generic text then inside of our header we want to distinguish our title section and our closing button so we're going to have a div here we're just going to have a class of title this will be the example modal text so we'll type that in and then after that we're going to have our close button this is just going to be a button and we want to give it a class of close button close that off and then you would think to just put an X in here but actually we're going to use an HTML entity which is called times and the reason we're using this is because it's easier to Center this symbol inside of an actual position here as opposed to text because text the just X character like this scale is based on your font so it's always different but this time symbol is always going to be the same for you and this right here is essentially all the HTML we need the very last thing we need to do is as you can see when we open our modal we get this nice blackish overlay over our screen so we just need to create a div we'll give it an ID here of overlay and this way we can darken out the rest of our screen when we open up our modal now we can work on going into our styles for styling this let's first open this up using live server so that we can see what we have to work with as you can see we have our button as well as our modal but of course our modal is not being styled correctly what's open up that style sheet that we created already and come in here and start styling our modal we can select our modal with that class of dot modal and then inside of here we want to position this not relatively but fixed and the reason we're using a fixed instead of absolute is because as the user Scrolls the page up and down we want the modal to follow them always also we want this to be completely centered and an easy way to do that is to put the top at 50% and the left at 50% and that's going to Center the top left corner of your modal if we save that you see our top left corner of our modal is at the very center of our screen so in order to get our modal completely centered in our screen in the very center what we need to do is we need to use translate so we'll use transform translate and if we say we want to go negative 50% in the x direction and negative 50% in the Y direction and save that you see our modal is now perfectly centered in the screen and essentially what this 50% corresponds to is 50% of the size of your container as opposed to the size of the entire screen which is what these 50 percents for top and left are doing now with our positioning done let's give our modal here a little bit of a border we'll just say we want to do a border one pixel of solid black and if we say that we get a nice border around here and we'll give it a little bit of a border radius as well so a border radius of 10 pixels there we go and on my screen everything is going to be quite a bit bigger because I'm zoomed in to 200% just to make everything a lot easier for you guys to see when you're watching the video so you may need to change these numbers to be larger or smaller according to your own actual needs of the modal next after that we want to use what's called z-index we want to set this just to some large number we'll say 10 for example and this is because we want our modal to draw above everything else so we need to give it this high Z index of 10 for example also we need to set a background color for our modal we're going to set our background color here to be white and the reason we need to set the background color is because we want this to stand out over top of our overlay and if we don't give it a background color it'll just blend in with the overlay that we put on our screen lastly we're going to size our modal so we're just going to give it a width of let's say 500 pixels and we also want to give it a max width since we never want it to be larger than 80% of the width first screen now if we say that you see it takes over about 80% of the screen and if our screen expands you'll see as soon as it hits 500 pixels it'll just stay dead center in the middle like this let's put that back down smaller so that we can start working on it and that's all we need to do to get our modal positioned where we want it to be the only thing left to add to the modal is to hide it by default but to make styling the rest of our content easier we're going to keep the modal visible for now let's move on to styling the modal header so we can select our header class which contains this example modo as well as the close button and inside of here we just want to give it a little bit of padding so it's pushed away from the edges we'll say 10 pixels and 15 pixels whoops 15 pixels there we go and we're going to make it so that it's display of Flex so our items will line up side-by-side just like this as you can see next we want to space our items out so we'll say justify content space between and we're going to line the items in the very center so we'll say a line items in the center just like this and if we say that you now see that our items are being pushed apart which is perfect lastly we want to add a little bit of a border to the bottom so we'll save border bottom we're going to set this equal to 1 pixels make it solid black and there we go we have a little bit of a separator from our header of our modal and our body of our modal next we can style that title so we'll say a modal header dot title and all we need to do with this is we want to change the font size to 1.25 REM and we want to change the font weight to make it bold that way just stands out a little bit more just like that and now we can style our closed by again we want to select our model header and the close button class that we applied just like that and inside of here we want to first change the cursor so that it's a pointer cursor so people know they can click on it we want to remove the border when I remove the outline background we essentially want to just make this as if it wasn't a button just like that if we say that you see that now it's completely invisible all you can see is the X which is perfect and we want to change the font size here so we'll say our font size is 1.25 re-amp just so it gets a little bit larger easier to see and of course we'll make it bold so that it's easier to see and there we go we have our nice little button over here for closing the modal which will hook up in JavaScript later the last bit of our modal the style is going to just be our modal body which is going to be incredibly easy all we want to do is add a padding to it we're going to use that exact same padding of 10 pixels and 15 pixels and if we say that you saw our modal right here is starting to look exactly the same as our modal in this example all we have left to do is work on the overlay background that we have so let's select that overlay here and inside of here we want to do some very some more stuff we're going to make it position fixed again so that way it'll follow us around everywhere we go on the site and we also want to make it so that by default it doesn't show up which would be an opacity of 0 I'm going to comment this out for now that way we can actually see the modal as we're working on styling it to make the modal fill the entire screen we just want to set the top left right in bottom all to be equal to 0 and this essentially will just make it push up to all the different corners of our screen and if we give it a little bit of background we'll just say here that we want a background color to be rgba 0 0 0 which is going to be black and we'll make it 50% opaque if we save that you'll see that our overlay here is just the same as our overlay in this example and the reason as I mentioned earlier that we gave a white background to our modal it's because if we remove that you see our overlay is actually going to show through our modal so we need that white background so it doesn't show through our modal the last thing we need to do is use pointer events so we'll say pointer events and we want to set this to be done essentially what this does is when our overlay is invisible so right here if our opacity is point out this makes it so that our overlay won't capture our click events if we get rid of this you'll see we can't actually click this button anymore so we need that pointer invents none so that we can click on this button when the overlay is not active we'll have a class for when it's active which would be called overlay active and inside of here we want to actually capture pointer events so we'll say pointer events is going to be equal to all and we want to set the opacity in here to be equal to one this way we can automatically toggle a none toggle or overlay and if we go in our index dot HTML and we add that class of active and save you'll see that the overlay will pop up and we can't click anything behind it which is perfect now as we move that class because we don't actually want that to be showing up by default let's also go back to our modal and actually hide this by default to do that we're going to use what's called the scale property we're just going to set this to zero which means that it's going to have a zero scale which means it'll be invisible if we save that you see it completely disappears let's do the same thing in here where we have an active class for our modal so let's type modal not active and inside of this is where we're going to change our scale to be equal to one so instead of here we want to make sure we copy over our translate part of our transform and just change the scale here to 1 and now if we go into our index.html and we add a class of active to our modal you'll see but it'll be full scale size which is perfect and the reason that we're using scale here instead of just display:none and display not none is because we can actually transition these elements to make it smoothly scale in and out of our browser so let's do that now we'll use transition and all we want to do is we want to transition over a 200 millisecond period with the timing of easy and ease out and there you go you kind of saw it when I save the page it kind of zooms in down this is only because we're in development using live server but it gives a good example of what this will actually look like do the exact same thing for our overlay so it gradually fades into existence which is perfect and as you can see it gradually fades away when I rebuilt the page which again this will only happen in development now that we have all of our Styles done we can actually start on the JavaScript but we need to go back into our HTML so that we can set up some selectors for our JavaScript first we want to have a selector for our close button so we'll say data close button and again I'm using data attributes here because I don't want to mix our styling classes with our JavaScript also an hour button to open the modal we need to have a data attribute here and this one is going to be called modal target and this is going to be a selector that points to the modal we want to open in our case we have an idea of modal here so we can just say our ID of modal and this is just a typical selector that you would use to select this modal and that's what we're going to put as our target this will allow us to have multiple different modal's on the same page with different buttons to open them and it will only open the exact modal you want now with that out of the way we can have no more changes to our HTML we need to make so let's open up our JavaScript and get started coding first we need to select our different things so we want to get our open modal buttons and I'm doing this as if we were for example to have multiple ways to open a modal because you can't always guarantee there's only going to be one way there could be multiple buttons to do this in our example there's only one but I'm going to do this as if there is multiple ways so we want to use query selector all instead of just a normal query selector let's make this a little bit larger so it's easier to see and in here we have that data attribute so we'll say data modal target and this will be our buttons for opening our modal which is perfect so anything that has that modal target will be inside of this open modal buttons class again let's copy this down and we're gonna do the same thing but this is going to be for our closed modal buttons and instead of saying data modal target we'll say data modal closed because that's the exact data attribute that we used in here it's actually a data close button so let me copy that and make sure I use data close button just like that and lastly we want to select our overlay element so that we can show and hide this as needed so we'll say a document dot get element by ID since we gave this an ID of overlay now we have all of our elements selected that we need we can actually go about hooking up our event listeners let's first do our open modal buttons so we want to loop over these for each and so for each button inside of this we're going to add an event listener this event listener is going to happen any time that we click on this button so when we click on this button what do we want to do first we want to get our modal that this is pointing to so we can say document query selector and we can use that data attribute from the button so we can say button data set which allows us to access all of the data attributes as if they're JavaScript object and it'll camelcase them for us so we can say mortal target and this is going to get our data attribute from our HTML so if we go in here it's going to get this hashtag modal from our HTML and that's what this code right here is doing so we're using query selector to select based on this target and so this is going to select our modal with that selector here which is of course our modal that we created so once we have that modal all we want to do is call a function that we're going to create called open modal and we're going to pass the model into that function so let's create that function now really simple open modal it's going to take a modal and all that function is going to do is first we're just going to check to see if the modal is equal to null if for some reason this gets called out of modal all we want to do is return but if we do have a modal all we want to do is say modal dot class list and we want to add a class to that list and this is going to be that active class that we created earlier I'm gonna do the exact same thing for our overlay because every time we have an open modal we also want our overlay to be open now while we're here let's create our close close modal function as well this is going to work very similarly to open modal except for instead of adding we're going to remove the active class from both our modal and our overlay so now we can do this open modal buttons well we can hook this up with our closed modal buttons so change this just like that and we get our modal but the modal here is not going to be based off of some query selector based on the data attribute so instead we want to do is we want to access the parent modal of this button since this button is inside our modal we can use what's called closest this will take a selector we know in our case that all of our modal's have the class of modal so we want to get the closest parent element with the class modal so what this is going to do this is going to say okay here's our button it's going to check the first parent it says is this have a class at modal it does not it checks the next parent and says does this have a class of modal and since it does this element right here is what is going to get returned in our JavaScript which is our modal which is perfect all we need to do here it's called a closed modal function instead of open and that's all our JavaScript code written now for example if we click open modal you'll see our modal will pop up and when we click the X it'll remove itself you also see that as smoothly animates in and animates out but we'll notice if we click outside our modal it won't actually remove the modal so let's write that code really quick all we need to do is we need to add an event listener to our overlay object because as you can see everything except for the modal is the overloading so we can say overlay dot add event listener and this is good again going to be a click event listener anytime that we click on the overlay we want to close our modal so inside of here what we want to do is we want to find every single modal that's open so we'll just say cons modal's oops I named that correctly so we have all of our modal's that are going to be open and if what we do is we can do a document query selector all and in here we have the query of dot modal this would select all of our modal's but we only want the open ones which are our active modal's this will give us all of our open modal's and now we can just save modal's dot for each we can loop over our modal's and for each one of these models all we want to do is close it so we'll call closed modal function and pass in the modal now when we open it and click outside of it you'll see that it'll close which is perfect and that's all it takes to create this simple modal it may be ugly but I'm sure that you have the skills to create a really nice looking modal and use this perfectly inside of your applications if you enjoyed this video please make sure to check out my other videos linked over here and subscribe to the channel for more projects just like this thank you all very much for watching and have a good day

Channel: Web Dev Simplified

Views: 182,604

Keywords: webdevsimplified, javascript modal, javascript modal popup, javascript popup, javascript modal tutorial, javascript popup tutorial, js modal, js modal tutorial, js popup, js popup tutorial, build a modal with vanilla javascript, vanilla js project, vanilla js modal, vanilla js popup, javascript popup window, javascript popup window tutorial, js popup window, js popup window tutorial, popup tutorial, js simple popup, javascript popup box, javascript popup message, modal, popup

Id: MBaw_6cPmAw

Length: 16min 55sec (1015 seconds)

Published: Sat Apr 20 2019

Reddit Comments

[u/[deleted]]

no c'mon i already hate popup ads

[u/neomorphivolatile]

Is it possible to learn this power?