Create a Modal Window with CSS

[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