Up next in 10
Build a Popup With JavaScript
3K views
Feb 7, 2024
Uncover the secrets of crafting engaging user interfaces as you learn "How to Build a Popup with JavaScript" in this insightful tutorial. This video guides you through the process of creating a customizable and responsive popup using pure JavaScript. From setting up the HTML structure to implementing the necessary JavaScript code, you'll gain practical insights into designing and incorporating popups seamlessly into your web applications. Whether you're a beginner seeking to enhance your JavaScript skills or an experienced developer looking for a quick and effective solution, this tutorial provides a clear and concise step-by-step guide. Elevate your web development projects by mastering the art of building dynamic and visually appealing popups that capture user attention and enhance the overall user experience. Explore the world of interactive web design with this hands-on tutorial and bring your websites to life with captivating popups.
View Video Transcript
0:00
Hello everybody
0:01
Welcome back to WebDev Simplified. Ignore the microphone, covering my body, I'm trying to get it as close to me as possible
0:07
to make the audio sound even better. In today's video, we're going to be creating a JavaScript model, so when you click on a button
0:13
it'll pop up a modal, that model will have some information, and then when you click the X button, it's going to reduce that model and go back to being the normal page
0:21
The model is going to look really ugly, but that's because I'm focusing purely on how to actually
0:24
create the model and get it to pop up and disappear, so this video can be as short as possible
0:28
for you. Let's get started now. So here's our basic modal. When we click the open modal, it'll open, the X will close it
0:38
and also if we click anywhere outside the model, it'll close it. So let's get started creating
0:42
that. I already created the basic files we need. I have a style sheet here which just sets
0:46
our box sizing to border box. I have a script tag, and I also have our index file here, which
0:51
links both our style sheet and our script tag for use later. The first thing we need is our
0:55
button, which will open our modal. So in here we just say button and we can give it some text of open modal
1:02
Then after our button, we want to create the modal here, as you can see on the right side
1:06
So inside of a div, which is going to be our container for our modal, so we're going to give
1:10
it a class here, which is going to be modal, and we'll also give it an ID of modal so that we
1:14
know what our button needs to open. Then inside of the modal, we have two sections
1:19
We have our header up here, and we have our content in the middle
1:23
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 head
1:28
header of our modal, and then we're going to create a second div, and this one is going to be
1:33
the body of our modal, so we'll just give it the class of modal body
1:38
And the modal bottle body is really simple. We're just going to type Lorm 80, which will generate 80 random words of Loram Ipsen, just generic text
1:46
Then inside of our header, we want to distinguish our title section and our closing button
1:51
So we're going to have a div here, we're just going to have the class of title
1:55
This will be the example modal text. So we'll type that in
1:59
And then after that we're going to have our close button. This is just going to be a button
2:04
And we want to give it a class of close button. Close that off
2:09
And then you would think to just put an x in here, but actually we're going to use an HTML
2:14
entity which is called times. And the reason we're using this is because it's easier to center this symbol inside of an
2:20
actual position here as opposed to text because text, the just x character like this, scales
2:26
based on your font, so it's always different, but this time symbol is always going to
2:30
be the same for you. And this right here is essentially all the HTML we need
2:34
The very last thing we need to do is, as you can see, when we open our modal, we get this
2:38
nice blackish overlay over our screen, so we just need to create a div
2:42
We'll give it an ID here of overlay, and this way we can darken out the rest of our screen
2:47
when we open up our modal. Now we can work on going into our styles for styling this
2:52
Let's first open this up using live server so that we can see what we have to work with
2:55
As you can see, we have our button, as well as our modal, but of course our modal is not
2:59
being styled correctly. Let's open up that style sheet that we created already, and come in here and start styling
3:04
our modal. We can select our modal with that class of dot modal, and then inside of here we want to position
3:10
this not relatively but fixed, and the reason we're using fixed instead of absolute is because
3:14
as the user scrolls the page up and down, we want the modal to follow them always
3:19
Also, we want this to be completely centered, and an easy way to do that is to put the top
3:23
at 50% and the left at 50%. And that's going to center the top left corner of your modal
3:28
If we save that, you see our top left corner of our model is at the very center of our screen
3:32
So in order to get our modal completely centered in our screen in the very center, what we
3:37
need to do is we need to use translate. So we'll use transform, translate
3:41
And if we say we want to go negative 50% in the X direction and negative 50% in the Y direction
3:47
and save that, you see our modal is now perfectly centered in the screen
3:50
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%s for top and left are doing
4:01
Now with our positioning done, let's give our modal here a little bit of a border
4:05
We just say we want to do a border one pixel solid black and if we say that we get a nice border around here and we give it a little bit of a border radius as well So border radius of 10 pixels There we go And on my screen everything is going to be quite a bit bigger because I zoomed into 200
4:21
just to make everything a lot easier for you guys to see when you're watching the video
4:25
So you may need to change these numbers to be larger or smaller according to your own actual needs of the modal
4:31
Next, after that, we want to use what's called Z-index. And we want to set this just to some large number. We'll say 10, for example
4:37
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
4:44
Also, we need to set a background color for our modal. We're just going to set our background color here to be white
4:50
And the reason we need to set the background color is because we want this to stand out over top of our overlay
4:55
And if we don't give it a background color, it'll just blend in with the overlay that we put on our screen
5:00
Lastly, we're going to size our modal. So we're just going to give it a width of, let's say, 500 pixels
5:05
And we also want to give it a max width since we never want it to be larger than 80% of the
5:10
width of our screen. Now if we save that, you see it takes up about 80% of the screen
5:14
And if our screen expands, you'll see as soon as it hits 500 pixels, it'll just stay dead-centered
5:18
in the middle like this. Let's put that back down smaller so that we can start working on it
5:22
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
5:30
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
5:38
this example model as well as the close button, and inside of here, we just want to give
5:42
it a little bit of padding so it's pushed away from the edges. We'll say 10 pixels and 15 pixels, oops, 15 pixels, there we go
5:49
And we're going to make it so that a display of flex, so our items will line up side by side
5:53
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
5:59
going to align the items in the very center, so we'll say align item
6:03
in the center just like this. And if we save that, you now see that our items are being pushed apart, which is perfect
6:09
Lastly, we want to add a little bit of a border to the bottom, so we'll say border bottom
6:14
We're going to set this equal to 1 pixels, make it solid black, and there we go
6:20
We have a little bit of a separator from our header of our modal and our body of our modal
6:24
Next we can style that title, so we'll say modal header. Dot title, and all we need to do with this is we want to change the font size to 1.25
6:33
REM, and we want to change the font weight to make it bold
6:37
That way it just stands out a little bit more, just like that, and now we can style our
6:40
close button. Again, we want to select our modal header, and the close button class that we applied, just
6:46
like that, and inside of here, we want to first change the cursor so that it's a pointer cursor
6:51
so people know they can click on it, we want to remove the border, I want to remove the outline
6:57
background, we essentially want to just make this as if it wasn't a button, just like that
7:01
And if we save that, you see it now. It's completely invisible. All you can see is the X, which is perfect
7:07
And we want to change the font size here. So we'll say our font size 1.25 REM, just so it gets a little bit larger, easier to see
7:14
And of course, we'll make it bold so that it's easier to see. And there we go
7:17
We have our nice little button over here for closing the modal, which we'll hook up in JavaScript later
7:21
The last bit of our modal style is going to just be our modal body, which is going to be incredibly easy
7:25
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
7:32
And if we save that, you see our modal right here is starting to look exactly the same as our modal in this example
7:37
All we have left to do is work on the overlay background that we have. So let's select that, overlay here
7:43
And inside of here, we want to do some various more stuff. We're going to make it position fixed again so that way it'll follow us around everywhere
7:49
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
7:55
of zero. I'm going to comment this out for now. That way we can actually see the modal as we're working on styling it
8:01
To make the model fill the entire screen, we just want to set the top, left, right, and
8:08
bottom all to be equal to 0, and this essentially will just make it push up to all of the
8:12
different corners of our screen, and if we give it a little bit of a background, we'll just say here that we want a background color to be RGBA 0 which is going to be black and we make it 50 opaque and if we save that you see that our overlay here is just the as our overlay in this example And the reason as I mentioned earlier that we gave a white background to our modal
8:32
is because if we remove that, you see our overlay is actually going to show through our modal
8:36
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
8:43
and we want to set this to be none. Essentially what this does is when our overlay is invisible
8:48
so right here if our opacity is blanked out, This makes it so that our overlay won't capture our click events
8:53
If we get rid of this, you'll see we can't actually click this button anymore. So we need that pointer events none so that we can click on this button when the overlay is not active
9:01
We'll have a class for when it's active, which will be called overlay
9:05
And inside of here, we want to actually capture pointer events. So we'll say pointer events is going to be equal to all
9:11
and we want to set the opacity in here to be equal to one
9:16
This way, we can automatically toggle and untoggle our overlay, and if we go into our index.html
9:22
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
9:31
Let's remove 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
9:37
To do that, we're going to use what's called the scale property, and we're just going to set this to zero
9:41
which means that it's going to have a zero scale, which means it'll be invisible
9:45
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 we'll save .model
9:52
. . And inside of this is where we're going to change our scale to be equal to 1
9:57
So inside 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
10:04
And we add a class of active to our modal, you'll see that it'll be full scale size, which is perfect
10:10
And the reason that we're using scale here instead of just display none and display not none
10:15
is because we can actually transition these elements to make it smoothly scale in and out of our browser
10:21
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 easing these out
10:30
And there you go. You kind of saw it. When I saved 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
10:38
Do the exact same thing for our overlay. So it gradually fades into existence, which is perfect
10:43
And as you can see, it gradually fades away when I reload the page. Which, again, this will only happen in development
10:49
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
10:57
First, we want to have a selector for our close button. So we'll say data close button
11:01
And again, I'm using data attributes here because I don't want to mix our styling classes with our JavaScript
11:06
Also, in our button to open the modal, we need to have a data attribute here. And this one's going to be called modal target
11:12
and this is going to be a selector that points to the modal we want to open
11:16
In our case, we have an ID of modal here, so we can just say our ID of modal, and this is just
11:22
a typical selector that you would use to select this modal, and that's where we're going to put
11:26
as our target. This will allow us to have multiple different modals on the same page with different buttons
11:31
to open them, and it'll only open the exact model you want. Now, with that out of the way, we have no more changes to our HTML we need to make, so let's
11:38
open up our JavaScript and get started coding. First, we need to select our different things
11:43
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
11:51
you can't always guarantee there's only going to be one way. There could be multiple buttons to do this
11:55
In our example, there's only one, but I'm going to do this as if there was multiple ways
11:59
So we want to use query selector all instead of just a normal query selector
12:03
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
12:10
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
12:19
Again, let's copy this down and we're going to do the same thing, but this is going to be for our closed modal buttons
12:24
And instead of saying data modal target, we'll say data modal close because that's the exact
12:28
data attribute that we used in here. It's actually a data close button
12:32
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 it will say document got get element by ID since we gave this an ID of overlay Now we
12:47
have all of our elements selected that we need. We can actually go about hooking up our event
12:50
listeners. What's first do our open modal buttons. So we want to loop over these for each. And so
12:56
for each button. Inside of this we're going to add an event listener. This event listener is
13:01
going to happen anytime that we click on this button. So when we click on this button
13:05
what do we want to do? First, we want to get our modal that this is pointing to
13:10
So we can say document.cure selector, and we can use that data attribute from the button
13:15
So we can say button. Dataset, which allows us to access all of the data attributes as if they're
13:21
JavaScript objects, and it'll camel case them for us. So we can say modal target
13:26
And this is going to get our data attribute from our HTML. So if we go in here, it's going to
13:30
get this hashtag modal from our HTML, and that's what this code right here is doing
13:35
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
13:44
modal that we created. So once we have that modal, all we want to do is call a function that we're going to
13:48
create called Open Modal, and we're going to pass the model into that function
13:54
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
14:02
to check to see if the modal is equal to null, if for some reason it's going to be a model called without a modal, all we want to do is return
14:09
But if we do have a modal, all we want to do is say modal. Class list, and we want to add a class to that list, and this is going to be that active
14:16
class that we created earlier. I'm going to do the exact same thing for our overlay, because every time we have an open
14:21
modal, we also want our overlay to be open. Now while we're here, let's create our close modal function as well
14:28
This is going to work very similarly to open modal, except for instead of adding, we're going
14:32
to remove the active class from both our modal and our overlay. So now we can do this, open modal buttons, but we can hook this up with our close modal buttons
14:41
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
14:49
So instead, what we want to do is we want to access the parent modal of this button
14:54
Since this button is inside our modal, we can use what's called closest. This will take a selector
14:59
We know, in our case, that all of our modals have the class of modal, so we want to get the closest parent element with the class
15:05
modal. So what this is going to do is going to say okay here's our button. It's going to check the first parent. It says Hack
15:10
Is this have a class of modal? It does not? It checks the next parent and says does this have a class of modal and since it does
15:16
This element right here is what is going to get returned in our JavaScript which is our modal, which is perfect
15:21
All we need to do here is called the closed modal function instead of open and that's all our JavaScript code written
15:26
Now for example if we click open modal, you'll say our modal will pop up and when we click the x it'll remove itself
15:32
You also see that it smoothly animates in and animates But you will notice if we click outside our modal, it won't actually remove the modal, so
15:39
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
15:45
you can see, everything except for the modal is the overlay. So we can say overlay
15:48
Add event listener, and this is again going to be a click event listener
15:52
Any time 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
15:59
So we'll just say, const, modals, who's name that correctly. So we have all of our modals that are going to be opened
16:07
And what we do is we can do a document. Queryselecter all
16:11
And in here we have the query of .modal. This would select all of our modals, but we only want the open ones, which are our active modals
16:19
This will give us all of our open modals. And now we can just say modals
16:23
We can loop over our modals. And for each one of these models, all we want to do is close it
16:28
So we'll call the closed modal function and pass in the modal
16:32
Now when we open it and click outside of it, you'll see that it'll close. you'll see that it will close, which is perfect
16:36
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
16:42
modal and use this perfectly inside of your applications. If you enjoyed this video, please make sure to check on my other videos
16:48
linked over here, and subscribe to the channel for more projects just like this
16:52
Thank you all very much for watching and have a good day
#Programming
#Scripting Languages
#Web Design & Development