1
00:00:02,360 --> 00:00:08,840
So we want to be able to show that modal and for that, we need a way to control the visibility of the backdrop

2
00:00:08,930 --> 00:00:10,010
and the modal.

3
00:00:10,010 --> 00:00:12,800
Now there are various ways of doing so

4
00:00:12,870 --> 00:00:15,980
in CSS - we can set the opacity,

5
00:00:15,980 --> 00:00:18,390
we can set the display property,

6
00:00:18,410 --> 00:00:20,330
anything like that.

7
00:00:20,330 --> 00:00:25,760
What we will need in the end is some way to pass in the information whether this should be visible

8
00:00:25,760 --> 00:00:27,500
or not from outside,

9
00:00:27,500 --> 00:00:34,810
so from our main document because one possible way would be to set let's say an open attribute, either

10
00:00:34,810 --> 00:00:41,840
set this to true or as you also see it on some built-in elements, just open, for example the built-in

11
00:00:41,840 --> 00:00:50,000
button element has a disabled attribute which you also add just like this. So when open or opened maybe

12
00:00:50,270 --> 00:00:55,300
is added let's say, then we want to show the modal, if it's not added we don't want to show it

13
00:00:55,460 --> 00:01:01,550
and now I'll add a script tag here and you could outsource this into a different file too of course where

14
00:01:01,550 --> 00:01:06,440
I want to do something when this button is clicked and I want to add this opened attribute when we click

15
00:01:06,440 --> 00:01:07,520
it.

16
00:01:07,520 --> 00:01:15,110
So I will now get access to my confirm button here maybe by using document query selector and I

17
00:01:15,110 --> 00:01:21,980
can select a button here because another advantage of the shadow DOM, we will just fetch this button

18
00:01:22,340 --> 00:01:29,360
because the buttons in our modal are part of the shadow DOM and therefore we are in no danger of accidentally

19
00:01:29,360 --> 00:01:31,650
selecting these from outside.

20
00:01:31,670 --> 00:01:34,020
So that's another advantage of the shadow DOM here,

21
00:01:34,100 --> 00:01:39,470
when we select something in our main document, we only select buttons in that main document

22
00:01:39,560 --> 00:01:45,230
and in this case we only have one button, so I can use this query selector and then I'll add my event

23
00:01:45,230 --> 00:01:56,820
listener here for the click event and here, I want to add the opened attribute to my uc-modal element.

24
00:01:57,780 --> 00:02:05,640
For this, I'll get access to my modal with document query selector and now we can simply use uc-modal

25
00:02:05,670 --> 00:02:12,630
as a selector because this is a valid tag by which we can select it and then we could say modal set

26
00:02:12,720 --> 00:02:21,340
attribute opened and now we need to assign a value here and I'll set this to an empty string. Now in

27
00:02:21,340 --> 00:02:27,610
order to be able to see that effect, we have to make sure that we're not showing the modal by default,

28
00:02:27,770 --> 00:02:34,450
which we currently are and especially its backdrop is blocking us from clicking anything, so to hide

29
00:02:34,450 --> 00:02:43,810
it by default, we got a couple of possible ways of solving this; one way of making sure we can show and

30
00:02:43,810 --> 00:02:52,200
hide this is to set the opacity to 0 by default which will hide this but then we'll face a problem actually

31
00:02:52,410 --> 00:02:58,140
because now if I reload this, it is hidden but we still can't click this because even though it's invisible,

32
00:02:58,170 --> 00:03:06,330
it's fully opaque, it's still in front of us. Now we could change the z-index but we can also set the

33
00:03:06,330 --> 00:03:12,210
pointer events here to none and this will not accept any clicks on the backdrop but let them through

34
00:03:12,210 --> 00:03:17,200
instead and we do the same on the modal and we just have to change this later when we show it

35
00:03:17,310 --> 00:03:21,740
so that we then really block clicks through it but here we want to allow them.

36
00:03:21,750 --> 00:03:27,890
So now if I reload, I can click this and if you watched, you saw opened was added here on the right,

37
00:03:27,930 --> 00:03:34,170
let me show this again. If I reload, this modal here doesn't have the opened attribute but if I click this

38
00:03:34,170 --> 00:03:38,790
button, watch it here on the right, here it is, there it opened.

39
00:03:38,790 --> 00:03:44,580
So this is working and now in the next lecture, we can work on doing something in our component

40
00:03:44,580 --> 00:03:46,860
when this opened attribute is added.