Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
Learn how to create a popular UI design pattern, the modal window, with CSS. Although usually built with JavaScript, CSS can provide fallbacks and replacements for many of the JavaScript interactions.
-
0:00
[MUSIC]
-
0:04
Hi everybody.
-
0:06
I'm Dave Conner, a web designer and front end developer.
-
0:09
In this Treehouse workshop we're going to learn how to create a very popular
-
0:12
UI design pattern.
-
0:13
The modal pop-up window.
-
0:15
Although usually built with JavaScript we're going to tackle our modal
-
0:18
using good old CSS.
-
0:20
By now you may be familiar with the industry mantra of keeping HTML for
-
0:23
structure, CSS for styles, and JavaScript for interaction.
-
0:27
But with the modernization of web browsers, and
-
0:29
advancements in both HTML and CSS.
-
0:31
These lines have blurred significantly.
-
0:34
CSS in particular has pushed the boundaries of these traditional roles,
-
0:37
with CSS animations, and generated content.
-
0:40
Kind of weasling in on JavaScript's turf.
-
0:42
So not only can CSS offer fallbacks from any JavaScript interactions, but
-
0:46
in some cases it can provide outright replacements.
-
0:48
Now, I am not advocating that we give up JavaScript, but
-
0:51
this is a fun exercise that shows us the power of CSS.
-
0:55
And it's pretty sweet to know that we do have alternatives.
-
0:57
And who knows,
-
0:58
maybe we'll find that in some instances it does make sense to use a CSS solution.
-
1:02
So let's get started.
-
1:04
Let's begin by looking at the page we'll be building.
-
1:07
As you can see, we have a nice, simple page here.
-
1:09
We have our headline and our button, which will launch the modal window.
-
1:14
The modal pops, covering the screen, and
-
1:16
forcing the user to interact with it before they can return to the application.
-
1:20
Now, this is a classic JavaScript interaction because we need to be able to
-
1:24
dynamically add CSS when the user clicks on the button.
-
1:28
It turns out, however, that we don't need JavaScript for this at all, as HTML
-
1:32
actually provides us with the UI element which can toggle between two states.
-
1:36
And that is the check box input.
-
1:38
The check box element is a two state control which represents a state or
-
1:42
option that can be toggled.
-
1:44
So it's either off or on.
-
1:46
Now the user can toggle the state by clicking on the element or
-
1:49
its label, as you can see here.
-
1:52
So how does the check box help us create a modal window?
-
1:55
Well, much like we have a hover pseudo class to target elements when they're
-
1:59
being hovered, check boxes have a check pseudo class which allows us to
-
2:02
target the element specifically when it's in its checked or on state.
-
2:07
This selector will only match your input while it's checked.
-
2:10
Let's go back to the page and refresh.
-
2:14
When we click our checkbox, the styles are added.
-
2:17
If we are to click it again, it would no longer match, and
-
2:20
any declaration on the pseudo selector would no longer apply.
-
2:24
So, we now have a check state and we have a way to target the state in our CSS.
-
2:29
This check pseudo class is actually the key to making the whole thing work.
-
2:33
Now, if we were to combine this check selector with, let's say,
-
2:36
a sibling combinator,
-
2:38
you could use this to target any siblings that appeared after our check box.
-
2:46
And just like that, we now have the ability to style not only the check box
-
2:50
but any sibling elements in both the on and off states.
-
2:54
Let's go ahead now and use this technique to build our modal popup window.
-
2:58
Opening up index.html, you can see we have a really simple page.
-
3:02
It is in fact, just a div with a headline.
-
3:05
This will be representing our main content.
-
3:08
Now we are going to go ahead and build our modal popup window.
-
3:11
So I will create a div and give it a class of modal.
-
3:16
This will contain all of our modal related elements.
-
3:19
We then create our check box, and give it an id of modal__trigger.
-
3:27
Then we'll make our label making sure we give the for
-
3:29
attribute the same name of modal__trigger.
-
3:37
This way, it's associated with the input, and
-
3:39
we can use it to toggle the check state, in place of the actual check box.
-
3:43
Now, below this we will create the actual modal window.
-
3:47
So let's make a div and give it a class of modal overlay.
-
3:56
This will be the div that we will style in order to hide and show the modal window.
-
4:01
And you can see it's a sibling to our check box.
-
4:04
Inside that we will have another div that will act as a wrapper
-
4:07
to keep our modal content contained neatly in the center of our window.
-
4:11
Let's create another div and give it a class of modal__wrap.
-
4:19
And then finally, the modal content itself.
-
4:25
You may have noticed that we have a second label inside our modal__wrap Both of these
-
4:29
two labels can toggle our input's check state as they both have their for
-
4:32
attributes set to modal__trigger.
-
4:40
And then we just have another headline.
-
4:42
And I pasted in some lorem ipsum dummy text.
-
4:45
So if we were to open this up in the browser nothing would happen.
-
4:49
We need to add our check box style and we still need to hide our modal.
-
4:53
Let's go ahead and do that now.
-
4:55
There are two style sheets that we've linked to.
-
4:57
The style.css that we included just contains some reset CSS and
-
5:02
some base styles to boost drop the demo.
-
5:04
It also includes some styles here for our main content.
-
5:07
The CSS code is providing styles for our main modal div,
-
5:10
making the labels look like buttons, adding some colors, and
-
5:13
fixing our modal window to the center of the screen.
-
5:17
The style sheet we're going to work in is actually modal.css.
-
5:21
So opening it up, the first thing I'm gonna do is hide our check box.
-
5:27
I will position it absolute, and off screen to get it out of the way.
-
5:33
Remember, we will be using the labels to control our toggle, so
-
5:36
we don't need to see the actual check box.
-
5:39
Next, I will hide our modal overlay and its content.
-
5:44
Set the opacity to 0, and the z-index to -100,
-
5:48
pushing it back behind all the other content.
-
5:53
The next two declarations are not necessary for this technique to work, but
-
5:56
they do provide a nice pop animation when we show or hide our overlay.
-
6:01
So, I'm going to scale down our modal using a transform and set a transition so
-
6:05
that we have a nice smooth popup instead of a media flash when our modal fires.
-
6:11
So, I am scaling the overlay to half its original size and I'm using a transition
-
6:17
with a cubic-bezier curve to get a nice, bouncy ease in when the modal is fired.
-
6:22
Okay, so we will save that and open up our browser.
-
6:26
And as you can see, our overlay is hidden.
-
6:29
Again, if you click on the button nothing will happen because we have
-
6:32
one last thing to add.
-
6:34
So let's go back, one more time, to modal.css.
-
6:38
We target our modal overlay class when the input is checked by adding input:checked,
-
6:44
the sibling combinator, and finally the modal overlay class.
-
6:51
So this selector will now target our modal overlay when our input is checked, and
-
6:55
we are just going to reverse the styles we just did.
-
6:58
So, we will set the opacity to 1.
-
7:00
We scale the element back up to 1.
-
7:07
And set the z-index to 800 so
-
7:09
we are sure that this div will be on the very top of all the other content.
-
7:15
And there you go.
-
7:16
We can save this and go back to the browser.
-
7:21
Refresh the page.
-
7:23
And now when we click on our label button, it will fire a beautiful modal overlay,
-
7:28
pretty rad.
-
7:31
So, there you have it, we have just replicated this pattern,
-
7:34
without the need for JavaScript.
-
7:36
The real takeaway here is that by thinking outside the box, and
-
7:38
using creative selector combinations, we can really achieve some cool results.
-
7:43
Using transforms and transitions, you could reproduce almost any of
-
7:46
the common animation effects that you see on these modal windows.
-
7:49
If you're interested in learning more about transforms or
-
7:51
transitions, make sure to check out our CSS courses,
-
7:54
right here at Treehouse, the links to which you can find in the notes.
-
7:58
So, that's it for this workshop.
-
8:00
I'm Dave Connor and I'll see you next time.
-
8:01
Thanks for watching.
You need to sign up for Treehouse in order to download course files.
Sign up