Sign up to access "Building Modals in Livewire" right now.

Okay, so let's go ahead and just use Livewire here to make out a second modal. We'll just keep the name really boring and call this second modal. And we kind of want to put that in. Yeah, so let's just go ahead and remove that. So delete and yeah, and let's go ahead and put this in modals.

Great. Okay, so we've got our second modal. We know that we need to register this somewhere globally. So let's go ahead and do that first second modal. We know that inside of the second modal template, we need to use that wrapper. So let's just steal our first modal and go ahead and put that in there.

And we'll call that second modal. And that's pretty much it. We can now trigger this from anywhere, but we kind of can't because we need the functionality inside of this to show and hide it. So we're going to come up with a really simple solution here. Let's come over to our first modal. All we need to trigger a modal is to know if it's visible,

to show it and to hide it eventually. We've not even used this yet, but we will be. So we're actually going to extract this out and just put it in a trait. So let's go ahead and get rid of all of this. And let's go over to our live wire directory here under under our app. And we'll create our traits folder. And inside of here,

we'll just say is modal dot PHP. Okay, so let's create this trait out. So trait is modal. And inside of here, we'll just paste in everything that we've done. Now we need to bring in our on attribute because that exists from live wire. So let's make sure we pull this in at the top. And of course, we're going to go ahead and give this a namespace as

well. So app. And that's now under live wire and under traits. Great. So back over to our first modal, we just want to use is modal. Obviously, make sure we put it in at the top, we can get rid of this now. And that's it. So now every time we want to create a modal, we just use this trait and it contains all of the functionality we need for this to actually exist as a modal. So over on

our second modal live wire component, we want to do the same thing is modal. And that's it. So now we can trigger this modal from anywhere, we create a modal, we add the trait, we register it, and we're done. So if we come over to our dashboard, let's go ahead and add in another button here to trigger this second modal. And I'm just going to wrap these

in div just so we can space these out a little bit better. And there we go. Okay, so this is our second modal that we want to trigger. So we're going to say second modal, and open second modal, and we're done. Let's head over, click on this. And there we go. There's our second modal, which we can close. There's our first modal, which we can close as well.