1
00:00:00,000 --> 00:00:04,920
[MUSIC]

2
00:00:04,920 --> 00:00:06,150
Hi everybody.

3
00:00:06,150 --> 00:00:09,290
I'm Dave Conner, a web designer and
front end developer.

4
00:00:09,290 --> 00:00:12,580
In this Treehouse workshop we're going
to learn how to create a very popular

5
00:00:12,580 --> 00:00:13,790
UI design pattern.

6
00:00:13,790 --> 00:00:15,520
The modal pop-up window.

7
00:00:15,520 --> 00:00:18,350
Although usually built with JavaScript
we're going to tackle our modal

8
00:00:18,350 --> 00:00:20,250
using good old CSS.

9
00:00:20,250 --> 00:00:23,540
By now you may be familiar with
the industry mantra of keeping HTML for

10
00:00:23,540 --> 00:00:27,320
structure, CSS for styles, and
JavaScript for interaction.

11
00:00:27,320 --> 00:00:29,440
But with the modernization
of web browsers, and

12
00:00:29,440 --> 00:00:31,540
advancements in both HTML and CSS.

13
00:00:31,540 --> 00:00:34,050
These lines have blurred significantly.

14
00:00:34,050 --> 00:00:37,240
CSS in particular has pushed
the boundaries of these traditional roles,

15
00:00:37,240 --> 00:00:40,040
with CSS animations,
and generated content.

16
00:00:40,040 --> 00:00:42,320
Kind of weasling in on JavaScript's turf.

17
00:00:42,320 --> 00:00:46,000
So not only can CSS offer fallbacks
from any JavaScript interactions, but

18
00:00:46,000 --> 00:00:48,840
in some cases it can provide
outright replacements.

19
00:00:48,840 --> 00:00:51,840
Now, I am not advocating that
we give up JavaScript, but

20
00:00:51,840 --> 00:00:55,010
this is a fun exercise that
shows us the power of CSS.

21
00:00:55,010 --> 00:00:57,530
And it's pretty sweet to know
that we do have alternatives.

22
00:00:57,530 --> 00:00:58,349
And who knows,

23
00:00:58,349 --> 00:01:02,910
maybe we'll find that in some instances
it does make sense to use a CSS solution.

24
00:01:02,910 --> 00:01:04,836
So let's get started.

25
00:01:04,836 --> 00:01:07,730
Let's begin by looking at
the page we'll be building.

26
00:01:07,730 --> 00:01:09,930
As you can see, we have a nice,
simple page here.

27
00:01:09,930 --> 00:01:13,300
We have our headline and our button,
which will launch the modal window.

28
00:01:14,540 --> 00:01:16,705
The modal pops, covering the screen, and

29
00:01:16,705 --> 00:01:20,754
forcing the user to interact with it
before they can return to the application.

30
00:01:20,754 --> 00:01:24,895
Now, this is a classic JavaScript
interaction because we need to be able to

31
00:01:24,895 --> 00:01:28,550
dynamically add CSS when
the user clicks on the button.

32
00:01:28,550 --> 00:01:32,800
It turns out, however, that we don't
need JavaScript for this at all, as HTML

33
00:01:32,800 --> 00:01:36,780
actually provides us with the UI element
which can toggle between two states.

34
00:01:36,780 --> 00:01:37,980
And that is the check box input.

35
00:01:38,990 --> 00:01:42,610
The check box element is a two state
control which represents a state or

36
00:01:42,610 --> 00:01:44,030
option that can be toggled.

37
00:01:44,030 --> 00:01:45,430
So it's either off or on.

38
00:01:46,540 --> 00:01:49,190
Now the user can toggle the state
by clicking on the element or

39
00:01:49,190 --> 00:01:50,550
its label, as you can see here.

40
00:01:52,240 --> 00:01:55,380
So how does the check box help
us create a modal window?

41
00:01:55,380 --> 00:01:59,030
Well, much like we have a hover pseudo
class to target elements when they're

42
00:01:59,030 --> 00:02:02,810
being hovered, check boxes have a check
pseudo class which allows us to

43
00:02:02,810 --> 00:02:06,160
target the element specifically when
it's in its checked or on state.

44
00:02:07,220 --> 00:02:10,450
This selector will only match
your input while it's checked.

45
00:02:10,450 --> 00:02:12,210
Let's go back to the page and refresh.

46
00:02:14,550 --> 00:02:17,670
When we click our checkbox,
the styles are added.

47
00:02:17,670 --> 00:02:20,490
If we are to click it again,
it would no longer match, and

48
00:02:20,490 --> 00:02:23,020
any declaration on the pseudo
selector would no longer apply.

49
00:02:24,510 --> 00:02:29,700
So, we now have a check state and we have
a way to target the state in our CSS.

50
00:02:29,700 --> 00:02:33,758
This check pseudo class is actually
the key to making the whole thing work.

51
00:02:33,758 --> 00:02:36,982
Now, if we were to combine this
check selector with, let's say,

52
00:02:36,982 --> 00:02:38,134
a sibling combinator,

53
00:02:38,134 --> 00:02:41,836
you could use this to target any siblings
that appeared after our check box.

54
00:02:46,560 --> 00:02:50,770
And just like that, we now have the
ability to style not only the check box

55
00:02:50,770 --> 00:02:54,440
but any sibling elements in
both the on and off states.

56
00:02:54,440 --> 00:02:58,473
Let's go ahead now and use this technique
to build our modal popup window.

57
00:02:58,473 --> 00:03:02,850
Opening up index.html,
you can see we have a really simple page.

58
00:03:02,850 --> 00:03:05,610
It is in fact, just a div with a headline.

59
00:03:05,610 --> 00:03:08,280
This will be representing
our main content.

60
00:03:08,280 --> 00:03:11,310
Now we are going to go ahead and
build our modal popup window.

61
00:03:11,310 --> 00:03:13,879
So I will create a div and
give it a class of modal.

62
00:03:16,230 --> 00:03:19,190
This will contain all of
our modal related elements.

63
00:03:19,190 --> 00:03:23,045
We then create our check box, and
give it an id of modal__trigger.

64
00:03:27,520 --> 00:03:29,973
Then we'll make our label
making sure we give the for

65
00:03:29,973 --> 00:03:32,211
attribute the same name of modal__trigger.

66
00:03:37,635 --> 00:03:39,736
This way,
it's associated with the input, and

67
00:03:39,736 --> 00:03:43,785
we can use it to toggle the check state,
in place of the actual check box.

68
00:03:43,785 --> 00:03:47,296
Now, below this we will create
the actual modal window.

69
00:03:47,296 --> 00:03:53,170
So let's make a div and
give it a class of modal overlay.

70
00:03:56,720 --> 00:04:01,150
This will be the div that we will style in
order to hide and show the modal window.

71
00:04:01,150 --> 00:04:04,110
And you can see it's
a sibling to our check box.

72
00:04:04,110 --> 00:04:07,160
Inside that we will have another
div that will act as a wrapper

73
00:04:07,160 --> 00:04:11,060
to keep our modal content contained
neatly in the center of our window.

74
00:04:11,060 --> 00:04:14,213
Let's create another div and
give it a class of modal__wrap.

75
00:04:19,690 --> 00:04:22,420
And then finally,
the modal content itself.

76
00:04:25,380 --> 00:04:29,292
You may have noticed that we have a second
label inside our modal__wrap Both of these

77
00:04:29,292 --> 00:04:32,606
two labels can toggle our input's check
state as they both have their for

78
00:04:32,606 --> 00:04:34,421
attributes set to modal__trigger.

79
00:04:40,510 --> 00:04:42,640
And then we just have another headline.

80
00:04:42,640 --> 00:04:45,960
And I pasted in some
lorem ipsum dummy text.

81
00:04:45,960 --> 00:04:49,380
So if we were to open this up in
the browser nothing would happen.

82
00:04:49,380 --> 00:04:53,330
We need to add our check box style and
we still need to hide our modal.

83
00:04:53,330 --> 00:04:55,336
Let's go ahead and do that now.

84
00:04:55,336 --> 00:04:57,670
There are two style sheets
that we've linked to.

85
00:04:57,670 --> 00:05:02,000
The style.css that we included
just contains some reset CSS and

86
00:05:02,000 --> 00:05:04,740
some base styles to boost drop the demo.

87
00:05:04,740 --> 00:05:07,837
It also includes some styles here for
our main content.

88
00:05:07,837 --> 00:05:10,733
The CSS code is providing styles for
our main modal div,

89
00:05:10,733 --> 00:05:13,998
making the labels look like buttons,
adding some colors, and

90
00:05:13,998 --> 00:05:17,340
fixing our modal window to
the center of the screen.

91
00:05:17,340 --> 00:05:21,890
The style sheet we're going to
work in is actually modal.css.

92
00:05:21,890 --> 00:05:25,760
So opening it up, the first thing
I'm gonna do is hide our check box.

93
00:05:27,190 --> 00:05:30,295
I will position it absolute, and
off screen to get it out of the way.

94
00:05:33,660 --> 00:05:36,601
Remember, we will be using
the labels to control our toggle, so

95
00:05:36,601 --> 00:05:39,430
we don't need to see the actual check box.

96
00:05:39,430 --> 00:05:42,378
Next, I will hide our modal overlay and
its content.

97
00:05:44,170 --> 00:05:48,368
Set the opacity to 0,
and the z-index to -100,

98
00:05:48,368 --> 00:05:52,020
pushing it back behind
all the other content.

99
00:05:53,260 --> 00:05:56,760
The next two declarations are not
necessary for this technique to work, but

100
00:05:56,760 --> 00:06:01,250
they do provide a nice pop animation
when we show or hide our overlay.

101
00:06:01,250 --> 00:06:05,587
So, I'm going to scale down our modal
using a transform and set a transition so

102
00:06:05,587 --> 00:06:09,870
that we have a nice smooth popup instead
of a media flash when our modal fires.

103
00:06:11,792 --> 00:06:17,580
So, I am scaling the overlay to half its
original size and I'm using a transition

104
00:06:17,580 --> 00:06:22,480
with a cubic-bezier curve to get a nice,
bouncy ease in when the modal is fired.

105
00:06:22,480 --> 00:06:26,870
Okay, so we will save that and
open up our browser.

106
00:06:26,870 --> 00:06:29,730
And as you can see, our overlay is hidden.

107
00:06:29,730 --> 00:06:32,720
Again, if you click on the button
nothing will happen because we have

108
00:06:32,720 --> 00:06:34,330
one last thing to add.

109
00:06:34,330 --> 00:06:38,550
So let's go back,
one more time, to modal.css.

110
00:06:38,550 --> 00:06:44,490
We target our modal overlay class when the
input is checked by adding input:checked,

111
00:06:44,490 --> 00:06:47,810
the sibling combinator, and
finally the modal overlay class.

112
00:06:51,190 --> 00:06:55,190
So this selector will now target our modal
overlay when our input is checked, and

113
00:06:55,190 --> 00:06:57,290
we are just going to reverse
the styles we just did.

114
00:06:58,660 --> 00:07:00,370
So, we will set the opacity to 1.

115
00:07:00,370 --> 00:07:04,253
We scale the element back up to 1.

116
00:07:07,872 --> 00:07:09,607
And set the z-index to 800 so

117
00:07:09,607 --> 00:07:13,470
we are sure that this div will be on
the very top of all the other content.

118
00:07:15,810 --> 00:07:16,780
And there you go.

119
00:07:16,780 --> 00:07:18,711
We can save this and
go back to the browser.

120
00:07:21,330 --> 00:07:22,120
Refresh the page.

121
00:07:23,120 --> 00:07:28,040
And now when we click on our label button,
it will fire a beautiful modal overlay,

122
00:07:28,040 --> 00:07:28,836
pretty rad.

123
00:07:31,610 --> 00:07:34,271
So, there you have it,
we have just replicated this pattern,

124
00:07:34,271 --> 00:07:36,110
without the need for JavaScript.

125
00:07:36,110 --> 00:07:38,990
The real takeaway here is that
by thinking outside the box, and

126
00:07:38,990 --> 00:07:43,330
using creative selector combinations,
we can really achieve some cool results.

127
00:07:43,330 --> 00:07:46,450
Using transforms and transitions,
you could reproduce almost any of

128
00:07:46,450 --> 00:07:49,500
the common animation effects that
you see on these modal windows.

129
00:07:49,500 --> 00:07:51,650
If you're interested in learning
more about transforms or

130
00:07:51,650 --> 00:07:54,400
transitions, make sure to
check out our CSS courses,

131
00:07:54,400 --> 00:07:58,470
right here at Treehouse, the links
to which you can find in the notes.

132
00:07:58,470 --> 00:08:00,220
So, that's it for this workshop.

133
00:08:00,220 --> 00:08:01,754
I'm Dave Connor and
I'll see you next time.

134
00:08:01,754 --> 00:08:02,480
Thanks for watching.