This episode is for members only

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

Get started
Already a member? Sign in to continue
Playing
05. Opening a modal from a modal

Transcript

00:00
OK, let's take a look at how easy it is to trigger a second modal from another modal. So we just want to be able to open any modal from any modal.
00:08
Now, this is a lot easier than what we've done on our dashboard, because our dashboard isn't a LiveWire component. If your dashboard was a LiveWire component,
00:18
you could actually use this technique instead of relying on Alpine and the LiveWire global object to do this. So let's head over to our first modal.
00:28
I'm going to go ahead and wrap the content just here in a div, just to keep that separate. And we're going to create another div out here with a button, which is going to open the second modal.
00:38
Now, because we are working now within LiveWire, what we can do is just add a wire click event to this. And we can just directly call dispatch to. Now, we still want to give the name for this,
00:50
because obviously we are targeting a very specific modal. So we're going to say modals and second modal. And we are going to dispatch the show event.
01:00
That's going to get picked up within the second modal and hopefully show it. So let's head over and open up our first modal. And we've got our button here.
01:09
This still works, obviously, as normal. But when I click Open Second Modal, sure enough, that modal pops up. When I hit Close, that goes ahead and sets that modal
01:19
to not be visible. And of course, we see the other modal behind it. And we can just go ahead and close this off as normal. Now, there's one problem here.
01:26
If we open up our first modal and our second modal and we use the Escape key, that closes both of their modals off. Now, the reason for this is that our Escape key is a window
01:38
object that we press on our keyboard. And we can't target a specific element with this. So what that's going to do is it's going to fire this off and send that event
01:49
to both of the modals, technically, which will close both of them. So we can't really get around this unless we do some really, really, really hacky stuff.
01:57
But to be honest, it's not too bad. Most of the time, we're just going to go ahead and either close this or click outside. So there we go.
02:04
We have triggered a second modal from within another modal. And we can just keep doing this if we wanted to. So if we wanted to open a third modal from inside of our second modal, that would work as well.

Episode summary

In this episode, we jump right into how to open a modal from inside another modal using Livewire. It's actually a lot easier than it sounds. We see why doing this is more straightforward with Livewire components compared to working with regular dashboards (especially those not set up as Livewire components). This means we can ditch some of the more awkward Alpine.js workarounds and just use Livewire’s built-in dispatch system.

You'll see a quick demonstration: inside the first modal, we add a button that, when clicked, triggers a Livewire event directly to open the second modal. It’s all done with a simple wire:click and dispatch, targeting exactly the modal we want.

We point out a little caveat too: when both modals are open and you hit the Escape key, both modals will close, since Escape fires on the window and both modals listen for that event. It’s a tiny issue, and not a dealbreaker for most cases, but just something to keep in mind.

By the end of the episode, you’ll see that you can chain as many modals as needed—open a second modal from the first, a third from the second, and so on. It’s super flexible and surprisingly painless in Livewire!

Episode discussion

No comments, yet. Be the first!