Essentially what we're going to do here is build out the ability to have one modal design, we want to be able to create a Livewire component for any of the modals, which we can have Livewire functionality within the modal, and then basically we just want to be able to trigger this from anywhere in our app using Alpine.

So let's take a look at how this actually works. The design is not great here, but let's go ahead and open up this first modal. Now there's quite a lot going on inside of this modal, I'm going to explain what we're doing there in a minute,

but we can go ahead and do things like you'd expect, we can click outside to close this, we can go ahead and hit the escape key on the keyboard to close this, and we have a button inside of here as well, which of course will close this.

Now we have a second modal just to demonstrate that this works with any components, we can just go ahead and create a new component and have it work as a modal, but let's take a look inside of this first modal again. So I've created out a really simple increment in here just to show you that

all of the Livewire functionality that you'd expect is going to work inside of this modal, so you can do pretty much anything that you would normally do with Livewire inside of the modals that we're going to build. The other thing that we're going to talk about is opening a second modal from anywhere,

and that includes modals that you already have open, so as you can see here if I click open second modal, that's opened that second modal on top of the modal we already have, and again this works in exactly the same way,

so I can click outside just to close that top modal, or I can press escape just to close them all off, unfortunately with the escape key we can't really target an upper element on the page, but clicking outside of that or going ahead and just clicking close will work.

Now what we're also going to do is look at programmatically closing modals inside of modals when something happens, now by that I mean for example if you were building out a form that you wanted to submit inside of a modal,

of course when that form is submitted and you've done something with that data, you might want to go ahead and close the modal off once that form has been submitted, now we don't have a form here but I've actually implemented when this counter gets to 10 it will just automatically close the modal,

so something fun we're at 9 at the moment, when I click 10 you can see that the modal shuts off, so you can just use the code that we're going to write out here to just shut the modal off when you submit a form or anything else that you need to do,

so that's pretty much what we're building here, let's head over to the next episode, get set up by just clicking and opening up a modal, and then we will add all of these nice touches to it as we go through the course.