7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 15Length: 1.4 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

8.2 Flexbox Modal Functionality

In this lesson, you will lay out your modal using the Flexbox model, and I’ll go through a quick review of the JavaScript used to make it actually pop up.

Useful Links

1 lesson, 00:39


2.Project 1: Flexbox Menu
2 lessons, 11:59

Basic Menu Styles

Styling the Flexbox Menu

3.Project 2: Complex Layouts
2 lessons, 12:16

Flexbox for Page Layout

Nested Flexible Boxes

4.Project 3: Banner With Centered Content
1 lesson, 07:25

Vertically and Horizontally Centered

5.Project 4: Ordered Content
1 lesson, 05:23

Changing the Order

6.Project 5: Image Grid
2 lessons, 10:03

Basic Styles

Using Flexbox to Finish the Layout

7.Project 6: Uneven Image Grids
2 lessons, 12:39

Basic Image Styles

Styling the Grid

8.Bonus Project 1: Flexbox Modal
2 lessons, 11:58

Building the Flexbox Modal

Flexbox Modal Functionality

9.Bonus Project 2: Flexbox Content Slider
1 lesson, 12:49

Building the Slider

1 lesson, 00:38

Final Thoughts

8.2 Flexbox Modal Functionality

Hello, and welcome back to our Flexbox Modal bonus project, in this lesson we're gonna pick up where we left off. We've got our HTML for our Modal, and we can see it down here at the bottom of our screen. And we're going to set that up using Flexbox to be centered on the page with a semitransparent background around it. And then we'll do a quick review of the JavaScript required to make this Modal work. So as a quick review, our Modal is contained in this div with the class of modal-container. That's the one that's going to have the semitransparent background applied to it, this container div. And that container is going to be absolutely positioned on the page so that we can make it take up the full width and height of the page. And then it's also going to serve as a flex container so that we could easily, vertically and horizontally, center this modal div inside it. So let's jump into our CSS and make that happen. So at the bottom of our CSS, skip a couple lines, and let's create a rule for the modal-container class, which is the name of the class that contains all of our modal information. So as I mentioned again, this is going to have a position of absolute, I'm also going to give it a semitransparent background color. We're going to use an rgba value here, since we need some alpha or transparency. And we're gonna make it black, so we're gonna use 000 for our rgb values, and then for our alpha value, we're gonna give 0.5, that'll give it a semitransparent background. So we can see that background color over here on the right, now let's make it take up the full width and height of our display area. So we gave it a position of absolute, we're now gonna give it a top, bottom, left, and right position of zero. So we're gonna set top to zero, bottom to zero, left and right. So all four of those are set to zero, so now that semitransparent background is taking up the full width and height of our page. So before we do anything with Flexbox here, let's go into the modal itself and let's add a few styles to it. So we're going to point to the modal class, dot M-O-D-A-L, and I want to specify a width of 400 pixels and a height of 200 pixels for that modal. And we can see that that changed up here, I'm also gonna set a background color. Of eee, a light grey, there we go, now we can actually see the content there. We'll bring our font size down to about 14 pixels, I'm gonna set the border radius, we're gonna round those corners a little bit. We'll set that to about eight pixels, and see how that looks, and that looks pretty good. And then I'm gonna put a box shadow around it to kinda give it a drop shadow look. So box-shadow, the offset is gonna be zero, zero, it's gonna be directly behind the modal itself. And then the spread is going to be pretty big, I'm gonna give it a 40 pixel spread. And we're gonna use a hex value of 555 for the color, and now we can see there's just slight shadow around it, and that looks pretty good. Now for the header inside it, that's an h2, I'm gonna create a rule for that, so dot modal space h2. I'm going to give it a background color of 40a9ed, kind of a light blue color, we're going to give it a text color of white. And you'll notice that the corners are no longer rounded on the top, because the h2's corners aren't rounded. So, I'm going to, first of all, add a little padding here, maybe about ten pixels. And then in addition to that, we're gonna add a border-top-left-radius of eight pixels. And I'll just copy that and do the same thing for border-top-right-radius, so that our corners are all rounded just like they are at the bottom. And we need some padding inside the body as well. And if I add padding to the modal itself, or the modal class itself here, then it's going to mess with our header. So instead of doing that, let's go into our HTML, and for the content, underneath the heading, but outside of the paragraph, I'm gonna create a new div here with a class of modal-body. And that moves that over, and we'll put that closing div after that paragraph, and then we'll give that modal-body class some padding. So dot modal-body, and we'll give it a padding of maybe that same ten pixels that we used for the heading. So now our content has some padding on it as well, we might even change padding-top to zero, and there we go. So now let's use Flexbox to center this on the page, and we're gonna discover that this is very, very easy to do, using what we already know of Flexbox. We're gonna go into our modal-container, we're gonna give it a display value of flex. We're going to set the align-items property to a value of center, and that will vertically center it. And then we're also going to do a justify-content property, and we're going to set it to center as well. And I was going to move this modal heading up, but I kind of like having that bar there. So instead of moving that up to the top, I'm going to get rid of the top left and top right radius. We're just going to make a quick decision there, that actually looks pretty good, I like that. So that gets our Modal where we want it, and that's really all we need as far as the Flexbox model, as far as our CSS is concerned. Now what I wanna do is to jump into jQuery and make it work, so I'm just gonna highlight some code that I've already written, and I'm just gonna paste it into our JavaScript window. That's not gonna work right away, until we go into our settings, go to the JavaScript tab and add jQuery here, so we will save and close that. And now we see that our container disappears, our modal disappears, and that's because of the first line of code here. Where we pointed to the modal-container using jQuery, and said, dot hide, and that obviously made it disappear. And then we added some code, a click event here to the btn-modal class, which is the class we gave to our button. And so when we click on that button, this function's going to run, where our modal-container is going to fade in. And then we've also, after it fades in, we're adding a click event to that modal-container, so that no matter where you click on that container, it will fade out. So, if we click on the Click Here button, we see our modal fade in and then we can click anywhere on the screen and watch it fade out. And that is how you can create a Flexbox Modal using jQuery, and the Flexbox layout model. Thank you for watching, and I'll see you in the next lesson.

Back to the top