Welcome back to Webb.

Have 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 JavaScript motile.

So when you click on a button, it'll pop up a model.

That motel has 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.

The motive is gonna look really ugly, but that's because I'm focusing purely on how to actually create the motel and get it to pop up and disappear.

So this video could be a short it's possible for you.

Let's get started now.

So here's our basic mortal woman.

Click the open motile.

It'll open the X will close it, and also if we click anywhere outside the model, it will close it.

So let's get started.

Creating that 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 our style sheet and our script tag for use later.

The first thing we need is our button which will open our model.

So in here we just say button and we could give it some text of open motile.

Then after a button, we want to create the model here, as you can see on the right side.

So inside of a div which is going to be our container for our model.

So we're going to give it a class here which is going to be mortal.

We're also giving an idea of model.

So you know what our button needs to open then inside of the model, we have two sections.

We have our header of here and we have our content in the middle, so we need to create two dips for that.

The 1st 1 is going to have a class here of Motile Header senses the header of our motile, and then we're going to create a second Dave and this one is going to be the body of our model.

So we'll just get the class of mortal body and the motive bottles body is really simple.

We're gonna type Lauren 80 which would generate 80 random words of Lauren Gibson just generic text.

Then inside of our header, we wantto distinguish our title section and are closing button.

So we're going to have a diff here, which is going to have a class of title will be that example.

Motile text.

So we'll take 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 that just x character like this scales 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 model, we get this nice blackish overlay over our screen, so we just need to creative will give it an i.

D.

Here of overlay, and this way we can darken out the rest of our screen when we open up our motile.

Now we can work on going into our styles for styling this well, it's first open this up using live server so we can see what we have to work with.

As you can see, we have our button as well as our model.

But of course, our model was not being styled correctly was open up that style sheet that we created already and come in here and start style.

In our model, we can select our model with that class of DOT model and then inside of here.

We want to position this not relatively but fix.

And the reason we're using fixed instead of absolute is because as the user scrolls the page up and down, we want the motel 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 of 50% and that's going to center the top left corner of your model.

If we say that you see our top left corner of our model, is it the very center of our screen?

So, in order to get our motile 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 extraction and negative 50% in the wind direction and say that you see our model 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 the's 50 percents for top and left or doing now with our positioning done, let's give our et motile here a little bit of a border.

We'll just say we want to do a border one pixel, solid black.

And if we said that, we get a nice border around here and we'll give it a little bit of a border radius as well.

So border radius of 10 pixels every day.

Oh, and on my screen.

Everything is going to be quite a bit bigger because I'm zoomed into 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, smaller according to your own actual needs of the motel.

Next.

After that, we want to use what's called Z Index.

We want to set this just to some large number, will say 10 for example, and is because we want our model to draw above everything else.

So we need to give it this Heisey index of 10 for example.

Also, we need to set a background code for a model.

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 gonna size our model, so we're just going to give it a with of, let's say, 500 pixels, and we also want to give it a max with, since we never wanted to be larger than 80% of the with first screen half, we say that you see it takes up 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 motile position where we want it to be.

The only thing left to add to the model is to hide it by default.

But to make style in the rest of our content easier, we're going to keep the model visible.

For now, let's move on to style in the motel header so we can select our header class, which contains this example motive as well as the close button and inside of here.

We just want to give it a little bit of Patty and so is pushed away from the edges, will say 10 pixels and 15 pixels, hopes 15 pixels in there we got and we're going to make it so that this display of flex, so items will line up side by side just like this.

As you can see next we want to space are items out so well?

So I 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 not see that items were 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 gonna set this equal to one pixels, make it solid black.

And there we go.

We have a little bit of a separate her from her head or ever model in our body of our model next weekend.

Style that title.

So we'll say Motile header Doc title and all we need to do with this is we want to change the font size to 1.25 r e m.

And we want to change the font.

Wait to make it bold.

The wager stands out a little bit more just like that.

And now within style or close button 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 a 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 who essentially want to just make this as if it wasn't a button just like that.

And if we say that you see at night 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 fun.

Size 1.25 R E m.

Just so it gets a little bit larger, easier to see.

And of course, we'll make it bold.

So it's easier to see.

And every day we have our nice little button over here for closing the model, which will hook up in Java script later.

The last bit of our model, the style is going to just be our mortal body, which is going to be incredibly easy.

All we want to do is add up.

Adding to it.

We're going to use that exact same padding of 10 pixels and 15 pixels.

And if we say that you saw a motel right here is starting to look exactly the same as our model.

In this example, all we have left to do is work on the overlay background that we have.

So was selected that overlay here and inside of here.

We want to do some very, some more stuff.

We're gonna make it position fixed again.

So that way it will 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 in a pass ity of zero.

I'm gonna comment this out for now that we can actually see the model as we're working on style in it to make the model fill the entire screen.

We just want to set the top left, right and bottom all to be equal to zero.

And essentially, we'll just make it push up to all of 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 RGB a 000 which is going to be black, and we'll make it 50% opaque.

If we say that, you'll see that our overlay here is just the same as are over in this example.

And the reason, as I mentioned earlier, that we gave a white background to our model because if we removed that, you see are overlay is actually going to show through our model.

So we need that white background so it doesn't show through our model.

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 none.

Essentially, what this does is born are over.

Light is invisible.

So right here for a pastis blanked out.

This makes it so that overlay won't capture our click events.

If we get rid of this, you see, we can't actually click this button anymore, so we need that point of events none 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 point defense 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 and untangle are over way.

And if we go into index dot html and we add that class of active and save, you'll see that the over little pop up and we can't click anything behind it, which is perfect.

Just remove that class because we don't actually want that to be showing up by default.

Let's also go back to our model and actually hide this by default.

To do that, we're going to use what's called the scale property.

We're going to set this to zero, which means that it's going to have zero scale, which means it'll be invisible if we say that you see it completely disappears.

Let's do the same thing in here.

We have an active class for a model, so it's a dot motile not active, and inside of this is where we're going to change our scale to be equal to have one.

So instead of here, we want to make sure you copy over, translate part of our transform and just change the scale here toe one.

And now if we go into index HTML and we add a class of active to our model, you'll see that it will 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 a transition over a 200 millisecond period with the timing of easing it.

He's out and there you go.

You kind of saw it.

When I save the page, it kind of zooms and down.

This is only because we're in development using life server, but it gives a good example of what this will actually look like.

Do the exact same thing for overlay, so it gradually fades into existence, which is perfect.

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 in the Java script, but we need to go back into HTML so that we can set up some selectors for our job script.

First, we want to have a selective for our close button.

So it's a data close button.

And again, I'm using data attributes here because I don't want to mix our styling classes with our Java script also in our button to open the model.

We need to have a date attribute here, and this one's going to be called motile Target, and this is going to be a selector that points to the motel we want to open.

In our case, we have an idea of model here so we can just say our i d of model.

And this is just a typical selector that you had used to select this model, and that's where we're going to put as our target.

This will allow us to have multiple different models on the same page with different buttons to open them, and it only open the exact motive you want Now.