Global Modals with Livewire and Alpine.js
Playing
01. Global Modals with Livewire

Episodes

0%
Your progress
  • Total: 18m
  • Played: 0m
  • Remaining: 18m
Join or sign in to track your progress

Transcript

00:00
There are loads of different ways to create and trigger modals in Livewire but coming up with a global solution can be a little bit tricky and in this video I'm going to simplify this down and create global modals that can be triggered from anywhere even with multiple links. We're not going to specifically tie the showing of modals into any particular Livewire component
00:23
which you might have done in the past or if you're just completely new to triggering modals in Livewire this should give you a good start. Let's look at how this works. I've created two global modals. One is for a contact page, the link for this will probably live in the footer or somewhere in your app and then just some other modal. Let's go ahead and click on this and you
00:43
can see that that triggers a modal. Sure enough we can either hit the escape key to get rid of that or we can just click anywhere outside. We're going to be keeping the actual modal itself pretty simple but you can go ahead and extend this to use any functionality that you need. So we have this some other modal here as well which pretty much does the same thing but just has different
01:03
content. If we just look at the class here or the component, the actual Livewire component, you can see it's pretty straightforward. There's nothing in here that's telling us whether to show this modal or not. That's all tucked away in this base modal component which we're going to be extending and of course we actually need to trigger this modal. How would we do that? Well we could
01:25
emit an event from a Livewire component but that would mean that we would have to create a Livewire component and have that sit every place that we want this modal to trigger. Instead what we're going to be doing is doing this with AlpineJS and we're going to hit Livewire over on the window object and emit to the specific modal. So let's go ahead and get started with this. We'll start
01:49
things off with just a fresh Laravel app with Breeze already installed and of course Livewire pulled in as well. Okay so we're back to a fresh Laravel project with Laravel Breeze installed just so we have a kind of scaffolding to work with as well as AlpineJS already pulled in in our head and we also have Livewire installed as well of course because that's what we're covering.
02:12
Now we're going to start things off by creating out a contact component or contact modal component with Livewire. Let's go ahead and kick this off so let's say Livewire make and let's go ahead and call this contact modal. Now by default of course what's going to happen here is with our contact modal we're going to return this view inside of here. We're going to use that but we
02:36
are not going to style the modal up just yet. We kind of want to play around with this first. We'll get to actually styling the modal at the end of the video but basically inside of here I just want some text just so I can see this triggered. So let's say just contact modal. Now we're going to go ahead and place this globally. It doesn't matter where you put this
02:55
but I'm going to put this at the bottom of the app.blade.php file which is the template for our entire app. So let's go ahead and say contact modal and we're pretty much done. That now lives on the page and of course we can see it just at the bottom down here. Now what we want to do is create an anchor or a button over here that when we click this this only shows and remember this
03:19
will actually be the modal eventually when we click that button. To do this we're going to start things off by creating out a show property which will be by default false and then in the template itself we can just wrap this in an if statement. We'll be doing something slightly differently to an if statement a little bit later but for now this will kind of prove how we want
03:41
this to work. So now that we have the condition of course that is now not going to be shown. We want it to show when we click on a link over in our dashboard.blade.php view. So let's go ahead and create out a button just inside of here and let's say show contact modal and let's go ahead and use alpine.js here. So let's initialize this with data just inside of here and basically when
04:07
we click on this we want to emit an event which will go ahead and set the show property to true. So for that let's go ahead and first of all create some kind of setter in here and let's set this show to true. Okay so what we now need to do is from our dashboard emit an event globally within livewire. Now to do this we just use window livewire we say emit to we choose the component
04:37
which in our case is contact modal and then we just choose the name of the event that we want to emit or the value or key of the event that we want to emit. So I'm just going to say show for now keep this really simple. Now over in our contact modal that's not going to do anything at the moment it's not going to trigger this method so I'm going to go ahead and add in a
04:55
listener in here. So let's go ahead and say listeners and let's define out our show listener and we've got the same method name so we don't necessarily need to do this but let's go ahead and just target show. So now what we're doing is when we click on this button we're triggering and emitting that show event over on contact modal that will be picked up here it will then
05:20
show the modal and we should see it let's go ahead and just add a little bit of styling to this just to make it look more like a link so I'm going to set the text to indigo 500 and let's go over and click on this remember at the moment it's not visible at the bottom of the page when I click on this sure enough it has been triggered so when we get around to actually creating the modal itself
05:43
of course it won't be shown at the bottom here it will actually show with a full screen with that background in. Now the only problem we've got is we want this to be really flexible we don't want to create another modal and have to do all of this over again so what we're going to do is create another modal copy that over see the problems that we're going to get and then we'll go ahead and
06:04
simplify this to make it much more reusable because the key is if you need another modal you want to be able to quickly create it so let's go ahead and again use live wire to make out some other modal I can't really think of any examples at the moment and let's just wait for that to come in and let's just copy pretty much everything we have over here just so we can prove
06:26
that this works in exactly the same way so over in our contact modal let's grab the code that we've got for this pretty much paste it over here and say some other modal so it works in exactly the same way and then over in our dashboard let's go ahead and just duplicate this button I'm just going to wrap this in a div just so it comes down a little bit let's just pull that in and why don't
06:48
we just copy this entire block and just pop it down here so show some other modal and of course here we want to reference some other modal it's pretty much what we need to do so now we've got two links when we click show some other modal that should trigger it and it doesn't look like it does let's have a look ah yeah of course we didn't actually add it to the bottom of our page so let's
07:10
do that first of all if it doesn't exist we can't do anything with it so some other modal and let's go over and try that again so click that that triggers some other modal click the contact one that triggers the contact modal great now there's a massive uh common thing between these two and that is all of our show functionality so what we can pretty much do is copy this over to a base
07:35
live wire component let's go ahead and do that now so let's go ahead and just make out another component called modal there are lots of different ways that we can do this but let's just keep this really simple now this by default has a render method we don't actually need to render anything out for this because it's just a base component so let's go ahead and just get rid of that and
07:53
then we'll get rid of the modal.blade.php file as well which actually is in resources views and live wire so let's delete that there we go okay great so now we can pretty much take all of this get rid of that pop it in the base here and do the same for our contact modal but then extend that base modal so let's import that here and let's import that over here as well so now when
08:26
we want to create a new modal all we need to do is create this and extend the base modal and then we just have a really convenient convenient way of triggering it directly from here let's go over and just try this out show contact show some other modal so that works really nicely but of course we actually want a modal window window in here so let's implement a really simple version of this
08:50
and then you can go ahead and improve on this if you need to so for this we're not going to create a live wire component there's no need to do that we can just use a blade component let's go ahead and say php artisan make component and let's make out just a modal component now we don't need the class for this so we can come over to view and just get rid of that in there and we can go over
09:13
to modal.blade.php and we can go ahead and start to fill this in so i'm just going to say modal for now and what we're going to do with this component is over in our contact modal for live wire we're going to go ahead and add this into here so we're just going to say x modal and then anything inside of here will be shown so contact modal let's do the same thing as well for our some
09:40
other modal and notice we're removing if show now the reason that we're doing that is we're going to entangle inside of our modal the show property from our base modal component so we're going to use this value to determine inside of here whether to actually show this modal component so at the moment it just looks like this where we have these two on the page down here so let's go ahead and
10:07
just start to style the modal up and then we'll look at triggering it to show it okay so the overall class for this let's go ahead and set to fixed and inset zero this is tailwind styling if you're not familiar and we're going to go ahead and set the overflow on the y-axis to auto let's add some padding in here so let's say padding on the x of four padding on the y of six
10:33
and on medium let's set the padding to 24 and on small padding on the x-axis to zero and let's give this a slightly higher z index as well so this is the overall wrapper if we just look at this now it just kind of fills up this entire thing let's go ahead and inspect this and you can see sure enough it just fills up the entire page but with that padding in there so now we want the kind of
10:57
background to this so let's go ahead and create this out in a separate div let's again make this fixed and inset zero so it fills up the entire screen and let's set transform on this as well now inside of this we're then going to have an absolutely positioned div let's make this absolute and again inset zero to fill that and let's set the background to say a gray 500 and let's set
11:23
the opacity to say let's go 75 so let's have a look at that and we should see there we go so that's the kind of backdrop of our modal now down here is going to be the actual wrapper itself so of course this is going to have some kind of white background perhaps we can make it rounded large overflow can be hidden and let's say transform as well and on a small viewport let's make the
11:51
width full and then we'll also make the margin x auto from small and we'll set a max width to large as well again it doesn't matter how you start this up you can go ahead and change this around let's give that a refresh and there's our modal so what we can now do is slot in the content in here and you'll notice that when we give that a refresh we've got our contact modal
12:13
content that's coming directly from inside of here to here so for each of these modals let's just give this a little bit of a padding like to kind of leave these open so we can style them directly within here so let's do that for some other modal as well and that's pretty much the styling done but of course it's always on the page because it's over in app.blade.php
12:35
we need to work out how to only show this when the show property on either of these modals is set to true now we're going to use alpine js again for this so let's just pull this down and let's set x data here to have a show property so what we can do is set this to false here and we can only show these two things if that's set to true so we can say x if or x show probably
13:07
and we can reference show so we'll only show this and this when show is true of course when we refresh both of them are hidden but we want this value to come from the base modal component either on the contact modal or the some other modal so for this we can conveniently use entangle and what we want to do with this is pass through the value that we're looking for so over here when
13:35
i define x modal we want to say something like wire model show to reference the show model or show property that exists within there that value eg true or false will then get passed down and we can use that inside of here and we can actually use on our blade component attributes wire and modal so let's go ahead and just try this out i'm going to go ahead and set this to show and this to show
14:06
and that should be enough now to get that working so this value will come directly from here and it will show it or hide it now let's go over and just try this okay so i've said modal this needs to be model because we're treating that as a live wire model let's give that a refresh click show contact modal and it's actually not letting me click through at the moment because i
14:30
believe the modal might be in the way so let's just have a look at what is not letting us get through here okay so of course we need x show on the overall wrapper as well because otherwise this full width and height thing is getting in the way let's give that another refresh and click on show contact modal that works we can't click away at the moment we've not implemented anything
14:53
to actually close this so when i have to refresh the page and then click on this one and you can see that that doesn't actually work so this is triggering the contact modal as well so let's figure out why that is as well it might just be because yeah we didn't actually change the text over so some other modal and let's go over and click some other modal that works nicely let's
15:17
refresh the page and there we go so both of them modals are now being triggered successfully but of course we need a way to close these off so let's go ahead and add an event listener here for key down and let's say escape window and let's go ahead and set show to false if that's the case and that should be pretty much it but of course what we want to do is for this kind of outer
15:44
wrapper this dark background that would be a good place to close this as well so let's go ahead and say x on click and let's set show to false here as well great okay let's try this out let's click show contact modal i can click outside i can also press the escape key of course for both of these because they work in exactly the same way now one more thing if we just check out the network
16:10
requests obviously because this is a live wire component we're making a request to update that property now when we close the modal notice we're making another request this isn't really necessary so the best thing to do here would be to add a defer just onto the end of here notice that now when we click it of course it does make a request to update that which it needs to do but when we
16:32
click away now it's deferred so we don't make another request so no point making two requests where we can just make one now the great thing about this solution is that now we can pretty much use this button anywhere where we want to trigger this modal we don't we're not limited to one place so this isn't tied into a live wire component which is what i was talking about
16:57
at the start of the video so for example if we wanted this over in our kind of overall layout maybe in a footer somewhere we could just really easily do this so let's just kind of pretend that we've got a footer element down here with the trigger for show some other modal now that's now going to work from here but it's also going to work from here so we can pretty much trigger
17:19
this global modal from anywhere we want now in terms of the modal styling this isn't perfect if you start to introduce forms into this you may come up with some issues what i'd recommend you do is actually head over to the laravel jetstream source and go ahead and steal the modal code from there because that introduces lots of additional functionality and it's a really solid modal
17:44
implementation this is just very very basic to get us started so there we go global modals which we can just really easily create pretty much the whole process of this is create out the modal component inside of the view very very simple now because we've extracted this out to a blade component and then just add in your content and trigger it from absolutely anywhere

Episode summary

In this episode, we're tackling the sometimes-tricky topic of global modals in Laravel Livewire and making it way simpler. Rather than tying modals to specific components (which gets repetitive and messy fast), you'll see how to create a truly global modal system you can trigger from anywhere in your app—even from multiple links in totally different places.

We start from scratch: with a fresh Laravel project (using Breeze as scaffolding), Livewire installed, and of course, Alpine.js for interactivity. The first example is a contact modal, and we walk through creating it, making sure it only shows up when triggered, and connecting it to your UI with a simple Alpine.js trigger. We even add a second modal to spot areas of repeated code, leading us to abstract the common logic into a base modal component using Livewire's inheritance, making future modals super quick to spin up.

To keep modals reusable and manageable, you'll see how to pull the shared Livewire state and show/hide functionality into a base component, then extend it for each different modal you want. On the frontend, we use a Blade component for the modal's actual structure and style, showing you how to slot in custom content and style it with Tailwind CSS. The visibility is linked between Alpine and Livewire with @entangle, so the two stay in sync without extra requests or weird flickers.

For dismissal, both clicking outside and escape key closing are covered. Plus, we optimize network requests so hiding a modal doesn’t always hit your server. The final result: you can drop modal triggers literally anywhere (header, footer, wherever!) without worrying about where the modal lives. If you need more powerful modals (like forms inside), the episode suggests checking out Laravel Jetstream's modal code for inspiration.

All in all, you’ll walk away knowing exactly how to set up flexible, global modals in Livewire that are easy to maintain and extend. No more hacky or component-tied solutions—just global, easily-triggered, and stylish modals throughout your app!

Episode discussion

No comments, yet. Be the first!