Name: モーダルウィンドウ。CSS チュートリアル (30日目のCSS3の16日目) (Modal Window: CSS Tutorial (Day 16 of CSS3 in 30 Days))
Uploaded: 2021-01-14T10:47:25.000Z
Duration: 13 min 42 s
Description: VoiceTubeの動画で発音を聞きながら英語表現を覚えよう！学べる英語：

Hey, everybody, welcome back to CSS three and 30 days.

未来進行形

Today is Day 16 and we're gonna be making motile window in only CSS three motile window.

Is that a pop up window that you see on websites to subscribe to something or to give you a notification on alert of some sort?

It's commonly used in bootstrap and other frameworks like that.

It pops up in front of your screen to to alert you of something or request something of you.

Typically, it's built in JavaScript or J query or the like, which requires you to learn those languages or download a plug in or learn a specific framework, which is not a big deal.

But this course is about making things only in CSS three pushing the boundaries of CSS three or at least pushing your boundaries of what you think CSS three can do.

And in this case, we're gonna just make a motel window on Lian CSS three.

JavaScript urge a query or anything like that.

You don't have to add that extra step, but also This means that if the person viewing your website or your application does not have JavaScript activated or installed or whatever on their browser and sometimes that's the case, then it still will appear because it's only CSS, so that's pretty neat.

Let's jump in and let me show you what that looks like.

We have the sandbox with our content here, which will turn into the motel window as you could see the close button and such.

But down here in the final result, you can see if we click tow launch motile, it will pop up just like so nice little animation, little background overlay, the body content to some texts and then a close button, which also closes the motel window.

Come back here when you're ready, check out the index file.

There's a few things that I want to note here and explain because the market is very important in this lesson.

We're not gonna be coating the market, but you need to understand how it works because it's crucial in how the CSS functions in this case.

So let's scroll down here and I will show you we have a input.

The first thing you see her under the H for an input on that input is a check box with the idea of click.

So we're gonna hide this input because we don't need to see it.

But the state of the input, whether it is checked or unchecked, is what's going to determine if our motile window appears We're not.

The label here wraps in a tag, which is a button, but the label.

It has the attributes of four Click, which is tying into this input right here.

So when we click on this label, so when we click on the button that we're actually clicking the label because that's the parent, it's goingto activate or check slash unchecked.

Let me just show you removed the style you'll see a check box, and if I click this, it's going to check and uncheck it.

And also this down here is going to do the scene, and that is very important.

So down here we have the dead with the idea of classic motile and just another David, the content and some market.

But another functionality element here is the label for Click that is that idea of Click appear that check box and then again, just a button with the class of clothes that toggles that input as well, and then down below that as a sibling of the motile element, we have the dead with the class of overlay, and that would be that black overly that we use.

It's going to toggle this input when you click on the close button.

In CSS, we can check to see if oven in put a check box is checked or otherwise, which means weaken style based on that attributes being checked or not, So jump into your final Nazi SS.

If you want to refer to these styles you always can.

We have a final dust CSS file where you can go through and see.

The only difference is in the final files.

It's going to be pretended with final double underscore and then the class.

And that's simply because the styles the final styles under the final results are on the same page is the sandbox, and I don't want to have conflicting styles and have, when I style one thing style, everything.

So I have a separate class or i d for each of the elements.

But the difference is the final elements.

The final results start with final double underscore.

So that's what you'll see in the final CSS in every lesson.

As long as you keep in mind the the pre pending a final double underscore.

What we're gonna do here is start coding up our style.

So let's the first thing we're gonna do is cut up that overlay and we're simply going to say position fixed top zero and left, right and bottom are all gonna be zero.

That just tells the position fixed element that it's gonna be connected to all four sides because a fixed position kind of jumps it up to the top top left.

So you need to position it specifically, so it knows to stretch itself.

That's just going to put it in front of everything on the page for the most part background we're going to say, I'm gonna go double Triple zero fought black Pointer events, this specific selector, it specifies.

The code editor specifies under what circumstances, if any, a particular graphic element can become the target of most events.

So our overlay, we don't actually want it to be the target of a mouse event, so we want to be able to click through it.

If we want to click something so the the overlay, you can sort of the point of events you can have set to auto or none or any number of different events.

In fact, if you just check here in Mazzella dot org's for the developer page, you can see the syntax of pointer events.

The element behaves as if if, if the pointer events property, we're not specified, it also just default and none.

The element is never the target of most events.

That simply means if you click it, it shouldn't register as anything.

So and we're just doing that for just to prevent any issues with clicking the overlay, being on top of different things, it's very likely we could not have the pointer events style in there at all.

But we have that in there specifically to to avoid any conflict with click events.

None for the overlay because we don't want to be able to have it registered as a click event when we click on it.

We're gonna put this as transform as a browser cross compatibility scale 0.5.

So it's half the size right now, but you can't see it because it's opacity.

We're going to style the input with the type of checkbox.

So our magical check box, but the checked state of it So that check box with the Czech State, This is the style that we're going to do.

But we're gonna use a general sibling Combinator.

This little character means any sibling of this element, so not necessarily just the adjacent sibling.

So if there's an input and then right below it, that's an adjacent sibling as long as there siblings, in fact, it could be any sibling that I specify within the document tree, not necessarily an adjacent one.

So basically one, when the input is checked, I'm actually gonna be selecting the overlay sibling pointer events Auto for this capacity, let's do is your 0.9.

I'm gonna go Web Kitt transform Scaled out toe one.