[MUSIC]

Hi everybody.

I'm Dave Conner, a web designer and front end developer.

In this Treehouse workshop we're going to learn how to create a very popular

UI design pattern.

The modal pop-up window.

Although usually built with JavaScript we're going to tackle our modal

using good old CSS.

By now you may be familiar with the industry mantra of keeping HTML for

structure, CSS for styles, and JavaScript for interaction.

But with the modernization of web browsers, and

advancements in both HTML and CSS.

These lines have blurred significantly.

CSS in particular has pushed the boundaries of these traditional roles,

with CSS animations, and generated content.

Kind of weasling in on JavaScript's turf.

So not only can CSS offer fallbacks from any JavaScript interactions, but

in some cases it can provide outright replacements.

Now, I am not advocating that we give up JavaScript, but

this is a fun exercise that shows us the power of CSS.

And it's pretty sweet to know that we do have alternatives.

And who knows,

maybe we'll find that in some instances it does make sense to use a CSS solution.

So let's get started.

Let's begin by looking at the page we'll be building.

As you can see, we have a nice, simple page here.

We have our headline and our button, which will launch the modal window.

The modal pops, covering the screen, and

forcing the user to interact with it before they can return to the application.

Now, this is a classic JavaScript interaction because we need to be able to

dynamically add CSS when the user clicks on the button.

It turns out, however, that we don't need JavaScript for this at all, as HTML

actually provides us with the UI element which can toggle between two states.

And that is the check box input.

The check box element is a two state control which represents a state or

option that can be toggled.

So it's either off or on.

Now the user can toggle the state by clicking on the element or

its label, as you can see here.

So how does the check box help us create a modal window?

Well, much like we have a hover pseudo class to target elements when they're

being hovered, check boxes have a check pseudo class which allows us to

target the element specifically when it's in its checked or on state.

This selector will only match your input while it's checked.

Let's go back to the page and refresh.

When we click our checkbox, the styles are added.

If we are to click it again, it would no longer match, and

any declaration on the pseudo selector would no longer apply.

So, we now have a check state and we have a way to target the state in our CSS.

This check pseudo class is actually the key to making the whole thing work.

Now, if we were to combine this check selector with, let's say,

a sibling combinator,

you could use this to target any siblings that appeared after our check box.

And just like that, we now have the ability to style not only the check box

but any sibling elements in both the on and off states.

Let's go ahead now and use this technique to build our modal popup window.

Opening up index.html, you can see we have a really simple page.

It is in fact, just a div with a headline.

This will be representing our main content.

Now we are going to go ahead and build our modal popup window.

So I will create a div and give it a class of modal.

This will contain all of our modal related elements.

We then create our check box, and give it an id of modal__trigger.

Then we'll make our label making sure we give the for

attribute the same name of modal__trigger.

This way, it's associated with the input, and

we can use it to toggle the check state, in place of the actual check box.

Now, below this we will create the actual modal window.

So let's make a div and give it a class of modal overlay.

This will be the div that we will style in order to hide and show the modal window.

And you can see it's a sibling to our check box.

Inside that we will have another div that will act as a wrapper

to keep our modal content contained neatly in the center of our window.

Let's create another div and give it a class of modal__wrap.

And then finally, the modal content itself.

You may have noticed that we have a second label inside our modal__wrap Both of these

two labels can toggle our input's check state as they both have their for

attributes set to modal__trigger.

And then we just have another headline.

And I pasted in some lorem ipsum dummy text.

So if we were to open this up in the browser nothing would happen.

We need to add our check box style and we still need to hide our modal.

Let's go ahead and do that now.

There are two style sheets that we've linked to.

The style.css that we included just contains some reset CSS and

some base styles to boost drop the demo.

It also includes some styles here for our main content.

The CSS code is providing styles for our main modal div,

making the labels look like buttons, adding some colors, and

fixing our modal window to the center of the screen.

The style sheet we're going to work in is actually modal.css.

So opening it up, the first thing I'm gonna do is hide our check box.

I will position it absolute, and off screen to get it out of the way.

Remember, we will be using the labels to control our toggle, so

we don't need to see the actual check box.

Next, I will hide our modal overlay and its content.

Set the opacity to 0, and the z-index to -100,

pushing it back behind all the other content.

The next two declarations are not necessary for this technique to work, but

they do provide a nice pop animation when we show or hide our overlay.

So, I'm going to scale down our modal using a transform and set a transition so

that we have a nice smooth popup instead of a media flash when our modal fires.

So, I am scaling the overlay to half its original size and I'm using a transition

with a cubic-bezier curve to get a nice, bouncy ease in when the modal is fired.

Okay, so we will save that and open up our browser.

And as you can see, our overlay is hidden.

Again, if you click on the button nothing will happen because we have

one last thing to add.

So let's go back, one more time, to modal.css.

We target our modal overlay class when the input is checked by adding input:checked,

the sibling combinator, and finally the modal overlay class.

So this selector will now target our modal overlay when our input is checked, and

we are just going to reverse the styles we just did.

So, we will set the opacity to 1.

We scale the element back up to 1.

And set the z-index to 800 so

we are sure that this div will be on the very top of all the other content.

And there you go.

We can save this and go back to the browser.

Refresh the page.

And now when we click on our label button, it will fire a beautiful modal overlay,

pretty rad.

So, there you have it, we have just replicated this pattern,

without the need for JavaScript.

The real takeaway here is that by thinking outside the box, and

using creative selector combinations, we can really achieve some cool results.

Using transforms and transitions, you could reproduce almost any of

the common animation effects that you see on these modal windows.

If you're interested in learning more about transforms or

transitions, make sure to check out our CSS courses,

right here at Treehouse, the links to which you can find in the notes.

So, that's it for this workshop.

I'm Dave Connor and I'll see you next time.

Thanks for watching.