Global Modals with Livewire and Alpine.js

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 models 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 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 models 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 model let's go ahead and click on this and you 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 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 it just has different 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 model 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 mode or how would we do that well we could emit an event from a live wire component but that would mean that we would have to create a live wire component and have that sit every place that we want this model to trigger instead what we're going to be doing is doing this with alpine js and we're going to hit live wire over on the window object and emit to the specific model so let's go ahead and get started with this we'll start things off with just a fresh laravel app with breeze already installed and of course live wire 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 alpine js already pulled in in our head and we also have live wire installed as well of course because that's what we're covering now we're going to start things off by creating out a contact component or contact modal component with live wire let's go ahead and kick this off so let's say live buy a make and let's go ahead and call this contact model now by default of course what's going to happen here is with our contact model we're going to return this view inside of here we're going to use that but we are not going to style the model up just yet we kind of want to play around with this first we'll get to actually styling the model 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 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 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 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 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 model and let's go ahead and use alpine js here so let's initialize this with uh data just inside of here and basically when 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 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 model 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 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 model that will be picked up here it will then 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 round to actually creating the modal itself of course it won't be shown at the bottom here it will actually show uh 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 model 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 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 livewire 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 that this works in exactly the same way so over in our contact mode well 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 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 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 all we need to do so now we've got two links when we click show some other model that should trigger it and it doesn't look like it does let's have a look uh yeah of course we didn't actually add it to the bottom of our page so let's do that first of all if it doesn't exist we can't do anything with it so some other model 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 model 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 livewire 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 then we'll get rid of the modal.blade.php file as well which actually is in resources views and livewire 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 model but then extend that base model so let's import that here and let's import that over here as well so now when we want to create a new model all we need to do is create this and extend the base model and then we just have a really conv convenient way of triggering it directly from here let's go over and just try this out show contact show some other model 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 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 to modal.blade.php and we can go ahead and start to fill this in so i'm just going to say model for now and what we're going to do with this component is over in our contact model for livewire 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 model let's do the same thing as well for our some 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 model 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 just start to style the model 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 uh 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 4 padding on the y of 6 and on medium let's set the padding to 24 and on small padding on the x axis to zero 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 background to this so let's go ahead and create this out in a separate div and 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 say gray 500 and let's set 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 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 model so what we can now do is slot in the content in here and you'll notice that when we give that refresh we've got our contact model content that's coming directly from inside of here to here so for each of these models let's just give this a little bit of a padding i like to kind of leave these open so we can style them directly within here so let's do that for some other model 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 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 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 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 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 livewire model give that a refresh click show contact model and it's actually not letting me click through at the moment because i 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 model that works we can't click away at the moment we've not implemented anything to actually close this so i'm going to 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 model 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 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 say 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 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 say show to false here as well great okay let's try this out let's click show contact model 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 requests obviously because this is a livewire component we're making a request to update that property now when we close the model 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 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 we want to trigger this model we don't we're not limited to one place so this isn't tied into a live wire component which what is what i was talking about 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 model now that's now going to work from here but it's also going to work from here so we can pretty much trigger this global model 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 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

Channel: Codecourse

Views: 4,976

Keywords: learn to code, tutorials, codecourse, php, web development, learn php, php tutorials, code

Id: aBKsuOPa5Ms

Length: 18min 10sec (1090 seconds)

Published: Mon Apr 19 2021