1
00:00:02,330 --> 00:00:05,390
So let's start building that modal component

2
00:00:05,390 --> 00:00:13,280
and for that I have a brand new project, just an HTML file with that basic HTML5 skeleton, no script

3
00:00:13,280 --> 00:00:20,570
files, nothing. There, I will now add my modal.js file where I want to create that code for that modal

4
00:00:20,660 --> 00:00:22,010
web component.

5
00:00:22,070 --> 00:00:27,410
Now throughout this module, always feel free to pause the video and try something on your own,

6
00:00:27,470 --> 00:00:32,300
if we're working on a certain feature where you feel like hey I can do that on my own,

7
00:00:32,300 --> 00:00:35,010
definitely pause and try it on your own,

8
00:00:35,150 --> 00:00:41,180
otherwise just code along and you will see many of the things we covered in the last lectures and modules

9
00:00:41,540 --> 00:00:48,740
and this module should therefore also help with really understanding all these pieces and see how they

10
00:00:48,740 --> 00:00:50,020
come together.

11
00:00:50,180 --> 00:00:57,140
So in modal.js, I will start by creating a new component class with the class keyword and I will name

12
00:00:57,140 --> 00:01:05,210
it modal and I will extend the HTML element, so I'll not extend an existing HTML element like a div or

13
00:01:05,210 --> 00:01:06,330
anything like that,

14
00:01:06,350 --> 00:01:15,020
I'll start from scratch here. Now before I add any content here, any logic, I will also register this with

15
00:01:15,020 --> 00:01:24,130
custom elements define, I'll name it uc-modal, that will be my tag and I point at this modal class.

16
00:01:24,140 --> 00:01:30,920
Now with that added, I'll go to the index.html file and there as before, add the script import

17
00:01:31,850 --> 00:01:39,800
to the modal.js file and thereafter we can add it here, uc-modal adds our own HTML tag in the

18
00:01:39,800 --> 00:01:45,290
body of this template and later we'll also add some logic so that we have to click a button to show

19
00:01:45,290 --> 00:01:48,040
it and height it but that will all come later,

20
00:01:48,050 --> 00:01:54,680
for now let's start adding some content to this modal and I'll start with the constructor where we always

21
00:01:54,680 --> 00:01:57,500
have to call super first and

22
00:01:57,500 --> 00:02:04,150
now in here, I will set up this general template for this modal and for that as you learned,

23
00:02:04,280 --> 00:02:06,290
we want to create a shadow DOM.

24
00:02:06,290 --> 00:02:10,440
Now as you also learned, this is of course not a hard requirement,

25
00:02:10,460 --> 00:02:17,660
we can create custom elements without the shadow DOM but the shadow DOM gives us many advantages and

26
00:02:17,660 --> 00:02:20,140
therefore I definitely want to use it here.

27
00:02:20,390 --> 00:02:27,470
So I will call this attach shadow and set the mode to open as always

28
00:02:27,530 --> 00:02:34,910
and now we can use the shadow root to start setting our innerHTML, so the template so to say, the

29
00:02:34,900 --> 00:02:40,680
HTML code of this custom component that is hidden away from the light DOM.

30
00:02:40,730 --> 00:02:47,530
Now I want to create a modal and this will actually consist of two major parts,

31
00:02:47,660 --> 00:02:55,640
for one I will have a div with a CSS class of backdrop, could also be an ID of backdrop if you prefer

32
00:02:55,640 --> 00:02:56,210
that

33
00:02:56,380 --> 00:03:03,110
and this will be the part behind the modal which will gray out the rest of the page whilst a modal is

34
00:03:03,110 --> 00:03:11,140
in the foreground and the other part therefore is of course the modal itself and again here I'm using a

35
00:03:11,140 --> 00:03:12,790
class of a modal,

36
00:03:12,790 --> 00:03:19,030
actually let's use the ID because we can be that specific here and selecting an ID is actually a

37
00:03:19,030 --> 00:03:21,490
bit faster than selecting a class,

38
00:03:21,490 --> 00:03:25,190
so from a CSS perspective, this is a bit better

39
00:03:25,190 --> 00:03:31,570
and now let me also add style tags here so that we can style all the components or all the elements

40
00:03:31,570 --> 00:03:36,640
we'll have in the modal and I will start with some rough styling and with the rough layout and later

41
00:03:36,640 --> 00:03:41,390
we'll add more and more feature to that modal, like different slot areas and so on,

42
00:03:41,470 --> 00:03:44,390
something we haven't covered yet, we'll learn it in this module.

43
00:03:44,880 --> 00:03:47,480
So let's start building that modal

44
00:03:47,540 --> 00:03:52,810
and first of all here I'll select the backdrop and I'll set a style for that backdrop.

45
00:03:52,810 --> 00:04:00,670
Now the style for this backdrop will be that it has a position of fixed from the top of the page and

46
00:04:01,120 --> 00:04:04,890
the way this is positioned in the index.html file directly in the body,

47
00:04:04,900 --> 00:04:09,580
this will refer to the overall document, to the overall page as a container.

48
00:04:09,580 --> 00:04:14,000
So from the top I want to have a distance of zero, from the left as well

49
00:04:14,260 --> 00:04:17,640
and then this backdrop should cover the entire page.

50
00:04:17,830 --> 00:04:23,560
So I'll give it a width of 100% and for the height, this would not work unless we also

51
00:04:23,560 --> 00:04:27,810
set the height of our body and the HTML tag to 100%

52
00:04:27,910 --> 00:04:35,560
but here we can use 100vh which stands for viewport height and also is about the entire height

53
00:04:35,620 --> 00:04:38,520
of our window basically.

54
00:04:38,650 --> 00:04:50,180
Now I'll give it a background of RGBA and then a transparent black color, maybe 75% opacity so 25%

55
00:04:50,200 --> 00:04:56,980
transparency here and with that, we should have a backdrop in place. Now since we already import

56
00:04:57,190 --> 00:04:58,330
this

57
00:04:58,810 --> 00:05:01,120
and we use our tag here,

58
00:05:01,150 --> 00:05:08,450
we should be able to reload this page and indeed, we now have a gray background and that is the modal

59
00:05:08,450 --> 00:05:09,590
background,

60
00:05:09,590 --> 00:05:15,040
it's not obvious here but we can confirm this if we simply inspect this in the developer tools,

61
00:05:15,110 --> 00:05:17,070
it's this background, this div

62
00:05:17,070 --> 00:05:18,910
here that is responsible for that.

63
00:05:18,920 --> 00:05:21,020
If I uncheck the background, it's gone.

64
00:05:21,050 --> 00:05:23,160
So we see the modal background here,

65
00:05:23,180 --> 00:05:24,380
that's great

66
00:05:24,380 --> 00:05:32,990
and if we had other content on this page and I will add something here, please confirm your choice and

67
00:05:32,990 --> 00:05:40,560
then we have a button which maybe says show details and confirm whatever you want,

68
00:05:41,410 --> 00:05:44,450
if I now reload,

69
00:05:44,590 --> 00:05:48,680
this is hidden behind the modal or behind the backdrop.

70
00:05:48,680 --> 00:05:49,550
So that is working,

71
00:05:49,580 --> 00:05:53,780
now just one tiny thing so that it's a little bit less ugly,

72
00:05:54,230 --> 00:05:57,030
let me again set some general styles, here

73
00:05:57,080 --> 00:06:00,950
I'll set a box sizing of border box for all the elements and

74
00:06:01,130 --> 00:06:03,680
that includes my custom elements by the way

75
00:06:03,680 --> 00:06:07,070
and for the body, I'll set a margin of zero

76
00:06:07,250 --> 00:06:12,020
and I'll set a font family of sans-serif here because I simply prefer that

77
00:06:12,070 --> 00:06:14,880
and now this looks a bit nicer.

78
00:06:15,470 --> 00:06:16,750
I'll get rid of the margin actually,

79
00:06:16,790 --> 00:06:22,520
let's give this a margin of 2rem instead so that we have a little bit of margin on the body,

80
00:06:22,520 --> 00:06:22,690
yes.

81
00:06:23,140 --> 00:06:23,360
Okay,

82
00:06:23,360 --> 00:06:26,250
so this is the general styling, the backdrop is in place.

83
00:06:26,330 --> 00:06:30,980
Now let's also add the modal style itself in the next lecture.