1
00:00:02,220 --> 00:00:07,320
Let's add some content in the modal, so inside of my modal div there,

2
00:00:07,500 --> 00:00:10,230
I actually want to have three sections.

3
00:00:10,470 --> 00:00:13,830
I want to have a header in there which holds a title

4
00:00:14,040 --> 00:00:19,350
and for now I'll simply have a dummy title there, h1 tag please confirm.

5
00:00:22,160 --> 00:00:24,480
Below the header here,

6
00:00:24,530 --> 00:00:27,350
I want to have a section,

7
00:00:31,790 --> 00:00:37,760
maybe with the ID main, whatever you want and in there, I'll have a slot because I want to be able to

8
00:00:37,760 --> 00:00:42,960
pass the content that is displayed as a message into this modal from outside

9
00:00:43,010 --> 00:00:46,460
and actually you're of course not limited to passing in some text here,

10
00:00:46,460 --> 00:00:53,140
you can pass in anything here - you can pass in an image, buttons, a form, inputs, whatever you want.

11
00:00:53,150 --> 00:00:59,750
So I reserve a slot here and then below that slot, I'll have another section and this should

12
00:00:59,750 --> 00:01:06,040
be the section where I have my button or my two buttons, I want to have two buttons in here,

13
00:01:06,230 --> 00:01:14,090
I'll give the section an ID of actions and the first button will be cancel, the second button will

14
00:01:14,090 --> 00:01:17,410
be confirm or okay or whatever you want

15
00:01:17,420 --> 00:01:21,040
and of course you could also create this in a more generic way,

16
00:01:21,080 --> 00:01:23,490
we have to draw a border at some point here,

17
00:01:23,540 --> 00:01:25,950
so I will go for the hardcoded buttons here,

18
00:01:25,970 --> 00:01:30,410
you could definitely find a solution where this can be passed in through slots too

19
00:01:30,740 --> 00:01:37,430
and I will show you how to have different slot parts in your template here in a second, we'll see that

20
00:01:37,430 --> 00:01:39,510
later in this module.

21
00:01:39,530 --> 00:01:41,970
So now I have these buttons in here,

22
00:01:42,050 --> 00:01:44,000
now we can style that a little bit.

23
00:01:44,630 --> 00:01:51,680
I'll select actions with the ID selector, give this a border to the top of one pixel solid and a light

24
00:01:51,710 --> 00:01:56,410
gray look let's say and if I now reload this,

25
00:01:56,600 --> 00:01:58,080
this is how it looks like,

26
00:01:58,400 --> 00:02:00,500
I definitely want have a different layout here.

27
00:02:00,500 --> 00:02:04,430
I want to distribute all these pieces across the available space,

28
00:02:04,430 --> 00:02:10,280
so for the entire modal here, I'll actually set the display to flex using flex box

29
00:02:10,280 --> 00:02:14,120
and if that's something you don't know, attached to this video you'll find some helpful resources for

30
00:02:14,120 --> 00:02:15,670
learning flex box,

31
00:02:15,680 --> 00:02:23,990
it's a way of managing the layout in CSS or managing boxes, elements in CSS and distributing them.

32
00:02:24,080 --> 00:02:34,760
I'll set the flex direction to column here and I said justify content to space between here and this should

33
00:02:34,760 --> 00:02:41,570
ensure that if I now reload this all, the buttons are at the end here and now I just want to go to my

34
00:02:41,750 --> 00:02:50,880
actions, give this a padding of let's say 1rem and also select my actions button elements here and give

35
00:02:50,880 --> 00:02:58,450
them a margin left and right of 1rem and with that, we have our buttons in here.

36
00:02:58,520 --> 00:03:05,790
Actually I want to have that differently, I want to give them 0.25rem to left and right margin

37
00:03:06,210 --> 00:03:14,450
and in my actions here, I'll set display to flex too and I'll set justify content here

38
00:03:14,630 --> 00:03:20,630
to flex end. So now I have my buttons here at the bottom

39
00:03:20,630 --> 00:03:25,580
and now of course you could style these buttons differently, for example make the cancel button red or

40
00:03:25,580 --> 00:03:28,460
yellow-ish and make the OK button green,

41
00:03:28,460 --> 00:03:33,910
I will keep them as they are because I don't want to lose too much time on all that styling.

42
00:03:34,050 --> 00:03:41,710
Let me quickly style that title up there though, so the header, I'll add the header selector here and there,

43
00:03:41,710 --> 00:03:48,970
I'll set up padding of 1rem, just as I have it here for the actions and I'll then also add a header

44
00:03:49,060 --> 00:03:51,420
h1 selector to select that h1 tag

45
00:03:51,430 --> 00:03:57,850
we have in the header and set the font size to 1.25rem maybe,

46
00:03:57,890 --> 00:03:58,440
let's see,

47
00:03:58,780 --> 00:03:58,960
yes

48
00:04:00,620 --> 00:04:03,720
and now we can pass in any content we want.

49
00:04:03,890 --> 00:04:06,370
Now I will also get rid of that height

50
00:04:06,380 --> 00:04:07,480
I set up there,

51
00:04:07,580 --> 00:04:14,060
that was only set temporarily to have some height when we had no content but now it should be as high

52
00:04:14,060 --> 00:04:20,630
as the content we pass in requires this to be and we can pass in any content we want. Since I have a

53
00:04:20,630 --> 00:04:27,170
slot, we can go between the opening and closing tags of our modal and for example, add a paragraph and

54
00:04:27,170 --> 00:04:35,180
then add any message we would want to show here with your confirmation, you agree to pay the full amount,

55
00:04:35,360 --> 00:04:40,760
whatever your app might be showing here and now with this paragraph added between the opening and closing

56
00:04:40,760 --> 00:04:42,300
tag of our modal,

57
00:04:42,320 --> 00:04:47,210
if I reload the page, we see it here and now again, time for some styling.

58
00:04:47,450 --> 00:04:49,170
Let's go back to the modal,

59
00:04:49,190 --> 00:04:56,150
keep in mind that the slot is inside of the main section so I'll style this main section here, select it

60
00:04:56,150 --> 00:05:00,880
by the ID selector main and give it a padding of 1rem too

61
00:05:00,920 --> 00:05:06,350
and if you would want to style the paragraph itself, you can use the techniques you learned in the last

62
00:05:06,350 --> 00:05:09,950
lectures with the slotted pseudo selector for example.

63
00:05:09,980 --> 00:05:10,330
Here

64
00:05:10,340 --> 00:05:16,960
I got no need to do that, so I will leave it as it is here.

65
00:05:17,020 --> 00:05:20,330
With that, we got a nice looking modal in my opinion,

66
00:05:20,470 --> 00:05:25,930
let's now ensure that we can also open and close it and we want to open it when this show details

67
00:05:25,930 --> 00:05:28,230
and confirm button here is pressed.

68
00:05:28,420 --> 00:05:29,980
So that will be our next task

69
00:05:30,010 --> 00:05:33,520
and if you have an idea for that, definitely try it on your own first.