hey everybody welcome back to css3 in 30
days today is day 16 and we are going to
be making
a modal window
in
only css3 a modal window is that pop-up
window that you see on websites to
subscribe to something or to give you a
notification
an alert of some sort it uh it's
commonly used in bootstrap and other
frameworks like that it's just a modal
window it pops up in front of your
screen to to alert you of something or
request something of you typically it's
built in
javascript or jquery or the like
which requires you to learn those
languages or download a plugin or learn
a specific framework which is not a big
deal but this course is about making
things only in css3 pushing the
boundaries of css3 or at least pushing
your boundaries of what you think css3
can do and in this case we're going to
just make a modal window only in css3
now what's the benefit of that well you
don't have to do it in
javascript or jquery or anything like
that you don't have to add that extra
step but also this means that if the
person viewing your website or your
application does not have javascript
activated or installed or whatever on
their browser and sometimes that's the
case
then it still will appear because it's
only css so that's pretty neat let's
jump in and let me show you what that
looks like here's d16 css only modal
window we have the sandbox with our
content here which will turn into the
modal window as you can see the close
button and such but down here in the
final result
you can see if we click to launch modal
it will pop up just like so nice little
animation a little background overlay
the body content just some text and then
a close button which also closes the
modal window so let's jump into our code
editor
download 16 modal window give you a
moment to do that pause the video come
back here when you're ready check out
the index file there's a few things that
i want to note here and explain because
the markup is very important in this
lesson
we're not going to be coding the markup
but you need to understand how it works
because it's crucial in how the css
functions in this case so let's scroll
down here and i will show you we have a
input the first thing you see here under
the h4 an input and that input is a
check box with the id of click but the
style is display none
so this input
makes everything happen so we're going
to hide this input because we don't need
to see it but
the state of the input whether it is
checked or unchecked is what's going to
determine if our modal window appears or
not the label here wraps an a tag which
is a button
but the label
it has the attribute of four click which
is tying into this input right here so
when we click on
this
label so when we click on the button and
we're actually clicking the label
because that's the parent it's going to
activate
or check slash uncheck it will toggle
this checkbox now if i if i
you know remove this let me just show
you
remove the style you'll see a check box
and if i click this it's going to check
and uncheck it
and also this down here is going to do
the same
and that is very important so i'm going
to style display none
so down here we have the div with the id
or class of modal and just another div
with the content and some markup that's
just for styling purposes but another
functionality element here is the label
for click that is that id of click up
here that check box
and then again just a button with the
class of close that toggles that input
as well
and then down below that as a sibling of
the modal element we have the div with
the class
of overlay and that will be that black
overlay that we use
and really that is it so
when you click on the label
for id right here we click on this
button it's going to
toggle this input when you click on the
close button it will also toggle the
input in css we can check to see if
if an input a check box is checked
or otherwise which means we can style
based on that attributes being checked
or not so jump into your final css
if you want to refer to these styles you
always can as in every lecture every
lesson we have a final css file where
you can go through and see the only
difference is in the final files it's
going to be prepended with final double
underscore and then the class and that's
simply because the the styles
the final styles under the final result
are on the same page as the sandbox and
i don't want to have conflicting styles
and have when i style one thing style
everything so i have a separate
class or id
for each of the elements but the
difference is the final elements the
final results start with final double
underscore so that's what you'll see in
the final css in every lesson
so that's there for your reference as
long as you keep in mind the
the pre-pending final double underscore
now let's jump into our
sandbox.css and what we're going to do
here is start coding up our styles so
let's the first thing we're going to do
is code up that overlay and we're simply
going to say position
fixed
top 0
and left right and bottom are all going
to be zero
that just tells the position fixed
element that it's going to be connected
to all four sides because a fixed
position kind of jumps it up to the top
top left so you need to position it
specifically so it knows to stretch
itself
is that index
99 that's just going to put it in front
of everything on the page for the most
part
background
we're going to say
i'm going to go double triple zero
flat black pointer events
this specific selector it specifies it
says right here right on the on the code
editor specifies under what
circumstances if any a particular
graphic element can become the target of
mouse events so our overlay we don't
actually want it to be the target of a
mouse event so we want to be able to
click through it we don't want it to to
conflict with if we want to click
something so the the overlay you can
sorry the pointer events you can have
set to auto or none or any number of
different events in fact if you just
check here in mozilla.org for the
developer page you can see the syntax of
pointer events basically if you choose
auto the element behaves as if
if the pointer events property were not
specified at all so just default and
none the element is never the target of
mouse events that simply means if you
click it it shouldn't register as
anything so and we're just doing that
for uh just to prevent any issues with
uh clicking the overlay being on top of
different things it's very likely we
could not have the pointer events style
in there at all and it would be fine on
some browsers
but we have that in there specifically
to
to avoid any conflict with click events
so pointer events
none
for the overlay because we don't want to
be able to have it register as a click
event when we click on it opacity 0 we
don't want to see it webkit transform
we're going to scale it we're going to
make it half the size so that scale is
0.5 we're going to put this as transform
as a browser cross compatibility scale
0.5 so it's half the size right now but
you can't see it because its opacity is
0. now
let's move along we're going to style
the input with the type of checkbox so
our magical checkbox
but the checked state of it
so that checkbox with the checked state
this is the style that we're gonna do
but we're gonna use a general sibling
combinator this little character
means any sibling of this element so not
necessarily just the adjacent siblings
so if there's an input and then right
below it that's an adjacent sibling as
long as they're
siblings in fact it could be any
sibling that i specify within the
document tree not necessarily an
adjacent one so we're going to select
overlay so basically when this when the
input is checked
i'm actually going to be selecting the
overlay sibling pointer events auto for
this
opacity
let's do 0.9
i'm going to go webkit transform
scale that to 1
and i'm going to do that again here for
cross compatibility on the browsers
and then what we're going to do is
webkit transition we're going to to
transition the transform at 0.5 seconds
and ease and we're going to transition
the opacity at 0.5 seconds with an ease
copy that paste it out remove webkit
simply for cross
cross browser compatibility that should
do that okay so let's save that and see
what happens now if i refresh and i
click on click to launch modal
we have our overlay slides up nice
and just like so but i can't remove it
because
there's no way for me to remove it and
that's something that we are actually
going to start to do here so below that
we're actually going to style the modal
and we're going to say position fixed
top 50
left 50
z index 100 we're going to do some
webkit transform here
we're going to translate
which is the x and y position on the
screen
negative 15 negative 50
and then scale
0.5 so half the size
now if i save that let's see what it
looks like so far so you can see it here
it's 50 of the size and it's negative 50
percent negative 20 if i were to change
this
to 50 and 50 let's see what happens it's
somewhere down here
so the negative 15 negative 50 is the
uh is the position of it so it's
actually right dead center as you can
see but it's half the size we're going
to scale it up once it's activated
copy that paste it remove webkit
there we go
we're going to go here and we're going
to say
width
and we're going to do 100
and max width
640. so it's basically always 600 and uh
a maximum of 640 but under that it will
be 100 basically responsive
styles pointer events
none and opacity zero
beautiful now i'm gonna do is style
the modal when the input is checked so
now it's hidden you can't see it so now
let's
do something when you can see it type of
checkbox the checked state
the general sibling combinator but we're
going to style the modal this time
pointer events
auto opacity one we're going to do
webkit transform and we're going to say
translate we're going to position that
uh it's going to be the same as this so
i'm just going to copy that
and paste it out
but the scale is going to be 1.
we want that to actually
grow to its full size so it doesn't look
silly
and now
we're going to do some transitions
we're going to transform
0.5 seconds ease and the opacity at 0.5
seconds and
ease
copy that sorry no i don't need to copy
that
yes i do
for the webkit
there we go
that looks good so the transition will
will
transition the transform and the opacity
so that means that those specific things
will animate if i didn't specify that it
would not affect
uh it would not animate the transform or
it would not animate the opacity you can
actually animate the position and other
elements as well
other states
and now we're going to do a transition
delay
0.1 seconds
and that's just gonna wait
0.1 seconds before it animates just to
give it like a little bit of a cascading
effect
and one last thing we're going to just
style up the modal
double underscore content
and we're going to say display block
we're going to give it some padding of
30 pixels and a background of white or
triple f
save that check it out in the browser
refresh click on your click to launch
modal
there it is it opens up the model is
there the close button if we click it
closes everything back out check this
out when i click it watch that the
overlay comes first and then 1.1 seconds
later the modal pops up so it's very
subtle but check it out
it just has a nice
creepy
that was very good thank you for hanging
out with me on number 16 day number 16
moda window i hope you enjoyed it hope
this gave you a few ideas to use on your
own websites and applications perhaps
build some css only modal windows in
your own projects
it's a very functional thing it's
something that you can use it's cross
browser compatible it's just css so it
should work everywhere for the most part
so enjoy have a good day i'll see you
tomorrow in day number 17.
[Music]
do