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