So we want to be able to show that modal and for that, we need a way to control the visibility of the backdrop
and the modal.
Now there are various ways of doing so
in CSS - we can set the opacity,
we can set the display property,
anything like that.
What we will need in the end is some way to pass in the information whether this should be visible
or not from outside,
so from our main document because one possible way would be to set let's say an open attribute, either
set this to true or as you also see it on some built-in elements, just open, for example the built-in
button element has a disabled attribute which you also add just like this. So when open or opened maybe
is added let's say, then we want to show the modal, if it's not added we don't want to show it
and now I'll add a script tag here and you could outsource this into a different file too of course where
I want to do something when this button is clicked and I want to add this opened attribute when we click
it.
So I will now get access to my confirm button here maybe by using document query selector and I
can select a button here because another advantage of the shadow DOM, we will just fetch this button
because the buttons in our modal are part of the shadow DOM and therefore we are in no danger of accidentally
selecting these from outside.
So that's another advantage of the shadow DOM here,
when we select something in our main document, we only select buttons in that main document
and in this case we only have one button, so I can use this query selector and then I'll add my event
listener here for the click event and here, I want to add the opened attribute to my uc-modal element.
For this, I'll get access to my modal with document query selector and now we can simply use uc-modal
as a selector because this is a valid tag by which we can select it and then we could say modal set
attribute opened and now we need to assign a value here and I'll set this to an empty string. Now in
order to be able to see that effect, we have to make sure that we're not showing the modal by default,
which we currently are and especially its backdrop is blocking us from clicking anything, so to hide
it by default, we got a couple of possible ways of solving this; one way of making sure we can show and
hide this is to set the opacity to 0 by default which will hide this but then we'll face a problem actually
because now if I reload this, it is hidden but we still can't click this because even though it's invisible,
it's fully opaque, it's still in front of us. Now we could change the z-index but we can also set the
pointer events here to none and this will not accept any clicks on the backdrop but let them through
instead and we do the same on the modal and we just have to change this later when we show it
so that we then really block clicks through it but here we want to allow them.
So now if I reload, I can click this and if you watched, you saw opened was added here on the right,
let me show this again. If I reload, this modal here doesn't have the opened attribute but if I click this
button, watch it here on the right, here it is, there it opened.
So this is working and now in the next lecture, we can work on doing something in our component
when this opened attribute is added.