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
I'm Dave Conner, a web designer and
front end developer.
0:00
In this Treehouse workshop we're going
to learn how to create a very popular
0:00
UI design pattern.
0:03
The modal pop-up window.
0:04
Although usually built with JavaScript
we're going to tackle our modal
0:06
using good old CSS.
0:09
By now you may be familiar with
the industry mantra of keeping HTML for
0:11
structure, CSS for styles, and
JavaScript for interaction.
0:14
But with the modernization
of web browsers, and
0:18
advancements in both HTML and CSS.
0:20
These lines have blurred significantly.
0:22
CSS in particular has pushed
the boundaries of these traditional roles,
0:25
with CSS animations,
and generated content.
0:28
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