1 00:00:02,210 --> 00:00:07,720 So back in the course project, I want to start by taking advantage of that backdrop 2 00:00:07,760 --> 00:00:10,580 you added in the last course module. 3 00:00:10,790 --> 00:00:17,930 I want to make sure that we can click these choose plan buttons and of course we could directly redirect 4 00:00:17,930 --> 00:00:19,580 the user to some other page 5 00:00:19,670 --> 00:00:26,060 but here, I really want to open a modal which is like a pop-up in the page you could say. You know it from 6 00:00:26,060 --> 00:00:27,070 a lot of pages, 7 00:00:27,140 --> 00:00:30,400 it's an overlay over the other content of your page 8 00:00:30,400 --> 00:00:31,370 so to say. 9 00:00:31,580 --> 00:00:36,250 Now you already added this backdrop with Manuel, here 10 00:00:36,410 --> 00:00:39,600 this backdrop div which you added to your HTML files, 11 00:00:39,830 --> 00:00:44,620 this will be one piece of the modal, it will be the background of the modal 12 00:00:44,660 --> 00:00:45,850 so that we can click 13 00:00:45,890 --> 00:00:48,590 any other content on the page. 14 00:00:48,590 --> 00:00:51,260 The other part is the modal itself, 15 00:00:51,320 --> 00:00:59,720 so the content we want to overlay and attached to this video, you find the HTML code for that modal. 16 00:00:59,930 --> 00:01:08,390 So copy that code and add it right after or in front of your backdrop here, like this. 17 00:01:08,390 --> 00:01:14,110 Now this code here simply is just a div with a h1 tag where we say do you want to continue 18 00:01:14,420 --> 00:01:21,410 and then a class modal actions where we essentially render two different buttons, one of them is a link 19 00:01:21,410 --> 00:01:27,500 styled as a button which says yes and the other one is a normal button which says no which should just 20 00:01:27,500 --> 00:01:28,700 close the modal. 21 00:01:28,700 --> 00:01:32,270 Now here, we navigate to start hosting index.html, 22 00:01:32,300 --> 00:01:34,750 that's the last missing page of our project, 23 00:01:34,760 --> 00:01:39,400 we'll add it later but for now, it's nice to have that button already 24 00:01:39,470 --> 00:01:47,150 and of course you see we've got a bunch of CSS classes added to our modal elements here and to take advantage 25 00:01:47,150 --> 00:01:50,330 of these classes and style this modal in a nice way, 26 00:01:50,330 --> 00:01:56,810 we need CSS code. Attached to this video, you also find a CSS file with the styles for this modal, 27 00:01:57,020 --> 00:02:04,250 so simply open that file and copy the styles you find in there into your main.css file, maybe just towards 28 00:02:04,250 --> 00:02:10,820 the end of that file. In there you'll find things you already learn about, position fixed, set index, top, 29 00:02:10,820 --> 00:02:20,990 left, width, background color, box shadow and borders, some alignment, stylings here, also maybe new this cursor 30 00:02:21,050 --> 00:02:27,050 pointer which just makes sure that when we hover over the button that we get this pointer cursor, so 31 00:02:27,050 --> 00:02:33,500 which turns our mouse cursor into a cursor that looks like a clickable element or that we are over a 32 00:02:33,500 --> 00:02:38,780 clickable element and some pseudo classes to change the styling when we hover over the different buttons 33 00:02:38,780 --> 00:02:39,450 and so on. 34 00:02:39,590 --> 00:02:42,680 That's really all that our modal requires. 35 00:02:42,680 --> 00:02:49,550 Now please keep in mind, this set index here of the modal has to be higher than the set index of our 36 00:02:49,550 --> 00:02:55,490 backdrop because the backdrop which has a set index of 100 should be in front of the other content we 37 00:02:55,490 --> 00:02:55,960 got 38 00:02:56,120 --> 00:02:59,990 but the modal itself then again should be in front of the backdrop. 39 00:03:00,080 --> 00:03:07,850 So if we add all that and we save that, we can reload our page and we don't actually see anything. 40 00:03:07,850 --> 00:03:14,410 The reason for that is that for the modal just as with the backdrop, we got a display style of none. 41 00:03:14,570 --> 00:03:17,860 Now we can comment this out, so let's comment it out, 42 00:03:17,910 --> 00:03:23,870 so to essentially show our modal and let's also comment out the display style of the backdrop so that 43 00:03:23,870 --> 00:03:25,690 both are not none 44 00:03:25,910 --> 00:03:29,970 and if we reload the page now, this is how our modal will look in the end, 45 00:03:30,110 --> 00:03:34,460 this is the modal we added and which I want to show when we click such a button. 46 00:03:34,610 --> 00:03:40,550 Of course it shouldn't be always shown as it is now though, it should only show up once we did 47 00:03:40,550 --> 00:03:47,330 click a button and it should disappear once we click the backdrop or the no button or the yes button 48 00:03:47,360 --> 00:03:53,840 but there, we simply navigate to a different page which we haven't added yet anyways. So what I'll do 49 00:03:53,840 --> 00:04:00,140 is, I'll set this back to display none, both for the backdrop and the modal and in the next lecture, we'll start 50 00:04:00,200 --> 00:04:07,850 adding some Javascript to essentially change this display property whenever we want to show or hide 51 00:04:07,910 --> 00:04:09,410 the modal and the backdrop. 52 00:04:09,530 --> 00:04:11,450 So let's do that in the next lecture.