Preview
Video Player
00:00
00:00
Create a Modal Window with CSS
8:03Learn 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.
[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