All right, I don't think that there is that much left for us to do outside of the confirmation model. So it's going to be a UI centric lesson. Let's get into it. Okay, so this is the UI we're going to focus on whenever we click on the confirm order in our card. This is going to open this center aligned model window with a detailed list of our purchases. And at the moment in our build, when we click on confirm order, nothing happens at all. So let's change that. Okay, I am in the active card component here. And right at

at all. So let's change that. Okay, I am in the active card component here. And right at the bottom, we have this button confirm order. When we click on that button, we want to open a model. And like I mentioned in an earlier lesson, you might think that we need to reach out for a JavaScript library for models. But really, all we need to do is the popover attribute in HTML. This is awesome. Check it out. Just below the button, and it could be anywhere in my markup, I'll have

This is awesome. Check it out. Just below the button, and it could be anywhere in my markup, I'll have a div here. And I will give it a popover attribute. And for that to be helpful, I also need to give this element an ID. So yeah, let's go with order confirmation. Now if inside of here, I have I am a cool popover. And we go take a look at the UI, you can see that nothing new has been added under the confirm order button. But if I was to remove the popover attributes, now the text is

under the confirm order button. But if I was to remove the popover attributes, now the text is here. So that popover attribute is going to turn the element into an actual popover. And by default, it's not showing until we toggle it with a button. So let's bring back the popover attributes, and then remember this order confirmation ID. And this is how we're going to toggle the popover. And so here on the button, I will have another attribute pop over target in one word. And here we

And so here on the button, I will have another attribute pop over target in one word. And here we will pass the ID of order confirmation. This is how we bind the toggle the popover target with the actual popover through the shared ID. And now check this out. This is really cool. So we don't see the popover. But when I click on the button that toggles it, it doesn't show just under but on the top corner. Keep your eyes on the top corner up here. And I'm going to click on the button.

on the top corner. Keep your eyes on the top corner up here. And I'm going to click on the button. It's gone. It's back. It's gone. It's back. And if I open the dev tools and inspect our element here, you can see that it has this status of popover. And you can see also that it's placed in the top layer, a layer higher than any Zen index will ever go. And you can see that our div, our popover has been placed after the HTML tag in this top layer. So basically,

our div, our popover has been placed after the HTML tag in this top layer. So basically, we don't have to mess up with Z index or putting our element right at the end before the closing body tag, or using portals in something like react, the popover is going to be placed in the top layer by default, and nothing can ever be on top of it. That is pretty awesome. Okay, so all what's left to make our element feel like an actual popover visually is add some classes to

so all what's left to make our element feel like an actual popover visually is add some classes to it. By default, the browser with actually try to center it on the page, but tailwind classes are fighting this. So let me go margin auto. And now when I toggle it, it should show right in the middle of the screen. And yeah, it does. And so now our mission is to make our popover look like this . One thing I really like about this design is this semi transparent overlay or backdrop in front of

. One thing I really like about this design is this semi transparent overlay or backdrop in front of the rest of the page. And guess what? The popover element actually comes with a backdrop pseudo element. And tailwind has a selector for this. As you can see at the top here, we can go backdrop column. And then let's go BG rose 500, but given an opacity of maybe 50%. Let's go have a look. And we're going to toggle our popover one more time. And we have this nice redish backdrop. It is

going to toggle our popover one more time. And we have this nice redish backdrop. It is literally a backdrop. If I inspect the element and go in the top layer, you can see that here we have this backdrop pseudo element. All right, but this red color is not really what I'm after. I basically want a transparent black, I guess. And we currently do not have this. So just like I did for the whites, if I go in app that CSS, remember, we had added the white color. And I want to add also

whites, if I go in app that CSS, remember, we had added the white color. And I want to add also the black color. Thank you, copilot. So that's going to give me access to a BG black, which we can try to set to 50% opacity. And that should look a bit closer to what we're looking for. Yeah, nice. Now this is not in the design, but I'm going to take the creative liberty of adding a little nice touch on a backdrop. And I'm going to add a little bit of blur. It always

adding a little nice touch on a backdrop. And I'm going to add a little bit of blur. It always looks cool if the backdrop cannot blurs out the rest of the UI. So you can focus on what's inside the popover. It's literally a one class affair back drop once again. And then let's go again back drop. And we'll go with backdrop blur, which basically will make the backdrop blur, and let's go with a small and let's check the result. Now we have this nice blurry backdrop.

and let's go with a small and let's check the result. Now we have this nice blurry backdrop. And when we have a popover panel in place, I think it's really going to stand out.