1 00:00:00,360 --> 00:00:05,250 This lesson, we're going to be setting up our HTML structure in order to use that, to build out our 2 00:00:05,250 --> 00:00:06,160 JavaScript code. 3 00:00:06,510 --> 00:00:11,190 So first of all, let's create a button and this is the button that's going to trigger off the modal 4 00:00:11,190 --> 00:00:12,030 popup window. 5 00:00:12,360 --> 00:00:18,720 We also need to build the model element so you can create that within a section, give it a class. 6 00:00:19,140 --> 00:00:21,210 So this can be the model wrapper. 7 00:00:21,570 --> 00:00:28,560 And then inside we'll have a device with a class for the body and adding in ahead, adding in a header 8 00:00:28,590 --> 00:00:33,600 and then within the header, this is going to be the title of the model and then also adding in a button 9 00:00:33,810 --> 00:00:35,960 that we can use to close the model. 10 00:00:36,090 --> 00:00:37,330 Then we need another element. 11 00:00:37,360 --> 00:00:39,840 So this can be for the body. 12 00:00:40,050 --> 00:00:43,450 So the model main area give this one a name of model meaning. 13 00:00:43,470 --> 00:00:46,980 And lastly, let's also add in a footer element and then refresh. 14 00:00:47,010 --> 00:00:48,020 I'll take a look at that. 15 00:00:48,030 --> 00:00:52,130 So we may also need to apply some styling to this to make it look more like a model. 16 00:00:52,170 --> 00:00:58,720 So adding into our style tags, select the element with a class of model wrapper, then within model 17 00:00:58,720 --> 00:01:04,790 wrapper will display block and setting it to the top and left of zero. 18 00:01:04,830 --> 00:01:09,850 The width can be 100 percent height as well, 100 percent background color. 19 00:01:09,900 --> 00:01:14,540 So it's going to be overly that we're going to be showing the same thing that as an Arga color. 20 00:01:14,700 --> 00:01:23,010 So we can include opacity making it black and around 50 percent and we'll do an overflow of Y and attaching 21 00:01:23,010 --> 00:01:24,720 a scroll option to that. 22 00:01:26,100 --> 00:01:32,490 In case the content is larger than what we have within our screen size, we can allow for having a scroll 23 00:01:32,490 --> 00:01:35,630 option for the model rather than setting up the model body. 24 00:01:35,670 --> 00:01:38,580 Give this one a width of 50 percent moving. 25 00:01:38,580 --> 00:01:42,870 It left 25 percent, top 10 percent and position at absolute. 26 00:01:42,900 --> 00:01:45,290 And let's also set a background color for this. 27 00:01:45,330 --> 00:01:47,410 So for now, we'll just set it as Alice Blue. 28 00:01:47,430 --> 00:01:49,010 So save that and refresh. 29 00:01:49,020 --> 00:01:50,440 So that's our model so far. 30 00:01:50,460 --> 00:01:52,650 We need to also adjust the close button. 31 00:01:52,650 --> 00:01:57,230 We can position this absolute as well and give it a position of thought and a right. 32 00:01:57,240 --> 00:01:59,850 So it's in the top right hand corner and refresh. 33 00:01:59,880 --> 00:02:04,680 So that gives us the option to close in just a few more adjustments to make it look better. 34 00:02:04,710 --> 00:02:10,470 I'm also going to update this and give it a class of H2 so we can select it instead of having an H2, 35 00:02:10,470 --> 00:02:14,570 because this is giving by default, it's giving some of the border around it. 36 00:02:15,000 --> 00:02:19,630 So bringing it into there with H2 and we can apply the staling here. 37 00:02:19,980 --> 00:02:26,460 So adding in a background color, setting that to block, updating the color to be white, making the 38 00:02:26,460 --> 00:02:30,720 font bigger and let's refresh, see what that looks like and I'll move this one in. 39 00:02:31,200 --> 00:02:32,010 Move this one in. 40 00:02:32,010 --> 00:02:37,260 So it's in line as well as clean that one up is within the model mean you can apply some styling as 41 00:02:37,260 --> 00:02:43,110 well and apply styling as needed till your application looks the way that you want to present it. 42 00:02:43,230 --> 00:02:45,420 You can apply some styling as well for the footer. 43 00:02:45,510 --> 00:02:51,030 So central line the text and I'll make the font smaller for the footer as well as applying a background 44 00:02:51,030 --> 00:02:51,370 color. 45 00:02:51,370 --> 00:02:55,440 And we can refresh and update the color to be white as well, to be in line with the header. 46 00:02:55,650 --> 00:02:58,110 So you're going to add in just a little bit of padding as well. 47 00:02:58,350 --> 00:03:01,080 So now we've applied some styling to our content. 48 00:03:01,260 --> 00:03:03,270 We're ready to introduce our JavaScript. 49 00:03:03,540 --> 00:03:07,830 So one last piece of the puzzle that we needed to do, and that's to hide the model. 50 00:03:07,980 --> 00:03:14,460 And usually the way that I do that is I like to set all of these values, build out the model, get 51 00:03:14,460 --> 00:03:17,460 it looking the way that I want it to look and then hide it. 52 00:03:17,460 --> 00:03:23,730 So we will apply a class of model to that element so that we know that that's when we want to show that 53 00:03:23,730 --> 00:03:24,630 particular element. 54 00:03:24,840 --> 00:03:30,450 And I'll add it in for now so that we can see the model being displayed and that will be added into 55 00:03:30,780 --> 00:03:31,650 the same element. 56 00:03:31,980 --> 00:03:37,980 So just refresh that and then we've got our model back and we want to take the model wrapper and apply 57 00:03:37,980 --> 00:03:41,010 a display property of none. 58 00:03:41,190 --> 00:03:44,070 So we're ready to apply our JavaScript functionality. 59 00:03:44,550 --> 00:03:50,670 So when we remove the show model class from the show model element and we're going to be applying it 60 00:03:50,670 --> 00:03:53,340 using JavaScript, you're going to see that it disappears. 61 00:03:53,490 --> 00:03:58,970 But we had the opportunity to structure and build out the visuals of our application. 62 00:03:59,310 --> 00:04:03,870 So next, we're ready to create content to make it interactive using JavaScript. 63 00:04:03,880 --> 00:04:04,750 So it's coming up next. 64 00:04:05,670 --> 00:04:10,890 So go ahead and build out your model, apply styling as needed, and it doesn't have to look exactly 65 00:04:10,890 --> 00:04:16,500 like mine as long as you've got the same functionality where you've got a button and essentially an 66 00:04:16,500 --> 00:04:20,310 element that we can hide and show when the button gets clicked.