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!