Name: JavaScriptでポップアップを構築する (Build a Popup With JavaScript)
Uploaded: 2021-01-14T10:23:16.000Z
Duration: 16 min 55 s
Description: VoiceTubeの動画で発音を聞きながら英語表現を覚えよう！学べる英語：

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.

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

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.

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.

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.

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.

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.

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.

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

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.

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.

Just so it gets a little bit larger, 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.

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.

字幕リスト動画再生

JavaScriptでポップアップを構築する (Build a Popup With JavaScript)

essentially

content

multiple

scale