1
00:00:02,450 --> 00:00:08,330
So with the backdrop added, let's work on modal, so #modal selects the element with the ID

2
00:00:08,330 --> 00:00:14,840
modal and just to reiterate on that, because we're in the shadow DOM, this only affects elements with

3
00:00:14,840 --> 00:00:18,040
the ID modal that are inside of our template here,

4
00:00:18,050 --> 00:00:19,350
so basically only

5
00:00:19,970 --> 00:00:27,410
this element here and for the modal, I want to have that in the foreground, so I'll actually give

6
00:00:27,410 --> 00:00:31,920
my backdrop a z-index of let's say 10 and modal

7
00:00:31,940 --> 00:00:33,710
will have a z-index of 100

8
00:00:33,740 --> 00:00:40,490
because it should have a higher z-index so that the backdrop is in the background of the modal.

9
00:00:40,490 --> 00:00:48,030
I'll also give a position of fixed, to position it in a fixed way in our viewport in our document, from

10
00:00:48,030 --> 00:00:48,450
the top

11
00:00:48,450 --> 00:00:52,920
let's say we have a distance of 15vh

12
00:00:55,590 --> 00:01:04,950
and from the left we have a distance of let's say 25% and then we have a width of 50%

13
00:01:04,980 --> 00:01:10,680
because we have 25 distance from the left, then a width of 50% and then also 25% from the

14
00:01:10,680 --> 00:01:13,020
right which is the leftover space,

15
00:01:13,020 --> 00:01:18,620
therefore this should be nicely centered and you can set different styles, optimize this for mobile,

16
00:01:18,620 --> 00:01:24,120
I'm not caring so much about the styling here, I just want to focus on the general functionality and

17
00:01:24,120 --> 00:01:25,710
not write a ton of styles.

18
00:01:25,770 --> 00:01:30,540
You could add media queries in here, whatever you need for the right styling.

19
00:01:30,540 --> 00:01:37,500
I'll go with this styling and I'll give it a background of white and to ensure that we can see something

20
00:01:37,500 --> 00:01:37,820
for now,

21
00:01:37,830 --> 00:01:44,160
I'll give it a height of let's say 30rem and we might be able to get rid of this later once we have

22
00:01:44,160 --> 00:01:45,330
some content in there.

23
00:01:47,580 --> 00:01:54,510
I also want to have a border radius of let's say 3 pixels and I'll give it a box shadow of 0, 2 pixels

24
00:01:54,570 --> 00:01:55,790
8 pixels

25
00:01:56,100 --> 00:02:03,120
and then let's say this style here, some transparent box shadow drop shadow

26
00:02:03,120 --> 00:02:08,610
and with all of that in place, let's head over and reload this page and here's our modal

27
00:02:08,610 --> 00:02:12,710
and obviously, this is missing all the content but we're getting there.

28
00:02:12,840 --> 00:02:14,280
Now we have the modal container,

29
00:02:14,280 --> 00:02:16,260
we have the backdrop behind it,

30
00:02:16,260 --> 00:02:21,000
now we want to populate that modal with some content of course

31
00:02:21,000 --> 00:02:26,580
and I want to have some static content in there and I also want to have some slotted content in there.

32
00:02:26,610 --> 00:02:27,810
So let's add that next.