Modals in Inertia
This episode is for members only

Sign up to access "Modals in Inertia" right now.

Get started
Already a member? Sign in to continue
Playing
04. Three ways to close a modal

Episodes

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

Transcript

00:00
OK, at the moment, we just cannot close this modal. We can't press Escape. We can't click anywhere. We can't click a button inside of the modal to close this out.
00:08
So now we're going to look at three ways that we can close this. Now, the two ways that are pressing Escape and clicking outside are handled very easily with the dialog. So our dialog from Headless UI will fire off an event
00:23
when the Escape key is pressed or when we click the outer container. And that is just inside of here. And it is closed. So we can just do something when this event fires, basically.
00:35
Now, how are we going to close this modal? Well, again, Momentum modal provides us, via this composable, the ability to close a modal. So this is that Boolean value for whether it should be shown.
00:47
And this is a function which we can invoke to actually close the modal off. So let's go ahead and say, when this close event happens, when we press Escape or when we click outside, then just close off this modal.
01:00
And then Show will be set to false. And therefore, the entire transition route will disappear. And it will transition out for us. So let's just try this out.
01:08
I'm going to go and just refresh the page. I'm going to hit Escape on the keyboard. Sure enough, it disappears. Let's open the modal again.
01:14
And let's click anywhere outside of here. And sure enough, this works. So anywhere inside of the modal, we can still click. Obviously, anywhere outside of this, it disappears.
01:23
So very, very easy to close that off. Now, just while we're here, let's go ahead and add some additional styles onto the dialog. I'm just going to set this to relative.
01:31
And I'm going to bump the z-index up, because otherwise, later, we're going to have issues with things appearing over our modal, which, of course, we don't want. OK, this is working really nicely.
01:41
But how do we programmatically, or more appropriately, click a button to close this modal off inside of the modal? Well, there's a couple of ways that we can do this. We could build out a general close button inside of the modal itself.
01:54
So we could do that within the dialog panel. Or we could do this within the component itself just here. So let's look at it both ways. And both ways pretty much do the same thing.
02:06
But the second way, we need to expose the close method via the slot. So if we wanted to close this off with inside the dialog panel, let's go ahead and just create out a button in here. Now, I'm not going to style this up.
02:18
Obviously, you would probably have an x icon and put this in the top right-hand corner. And let's go ahead and attach this in. So I'm just going to say close modal.
02:26
And let's go ahead and say, when we click on this, what do we do? Well, we just invoke that close. That's pretty much all you need to do. So now you have, in every single modal, a close modal button,
02:37
which, of course, would probably sit at the top here. But when you click it, it just closes it off. So incredibly simple to do. Now, if you wanted to use this functionality outside of your modal,
02:51
how would we do this? Well, let's just try out doing this in our template. So I'm going to go ahead and grab the import for use modal and invoke the composable.
03:02
And we're going to do that inside this modal here. Now, just before we do that, let's get rid of our inner close modal button, because that's completely different. And let's just try and invoke close from here.
03:12
We don't need show here. So let's go and create a button within the slot of this modal to close this modal. So let's, again, say V on click and close.
03:25
And let's see what happens. So let's go over, open the modal up, and let's click Close. Sure enough, it works. So you could do this, but a nicer solution
03:35
would be to pass this close method down into our overall slot. So we can just use this without having to import this and invoke this composable every single time we want to implement this functionality. So it'd be more convenient to just expose this via here,
03:52
and then we can just invoke it. So by that, I mean getting rid of the import and the composable from our example component, our example modal, and then having this available instead.
04:02
So how do we do that? We can do this just with view, and we can pass this close method effectively down to any of the slot content that we have. So to do this, we just go ahead and bind in this close method directly
04:14
into here. And then we'll have it available directly inside of here. So the way that we now use this is we say V slot, and then we extract out what we have bound into this slot and pass down.
04:26
So that is just close. So now rather than having to import this up here every single time we want to close this from inside of our modal and each individual modal, we just have this available inside of here now.
04:37
So we're calling this from here, and we should see that this works in exactly the same way. So there we go, three ways to close this. And if you need to programmatically close this,
04:47
you can just go ahead and import this from there. We'll look at an example of that a little bit later, because that can be really important based on a certain function that you're calling within any of your modals.

Episode summary

In this episode, we dig into the three main ways you can close a modal. Right now, the modal can't be closed at all — you can't press escape, click outside it, or use a button inside the modal. So, we fix all that!

First up, we show how pressing the Escape key or clicking outside the modal can close it. If you're using something like Headless UI's <Dialog>, it gives you a handy event for this. We connect this event so that when it fires, we simply call the close function provided by our modal composable, and poof — the modal disappears with a nice transition. We demo this by refreshing the page, trying Escape, and clicking outside, all of which work perfectly.

Next, we cover adding an actual close button inside the modal, probably the most familiar way for users. We stick a button in the modal and hook it up to the same close function. Whenever you click it, the modal closes, simple as that. You can style it however you like — the standard "x" in the top corner is always a good option!

Then we talk about exposing the close method to slot content, so you can put a close button anywhere in the modal content, not just in the dialog panel itself. We show how to pass the close method to the slot, so you don't need to import or wire up the composable every single time you want to close from some content.

By the end, you'll have complete control: close by escape, clicking the overlay, button in the modal, or even programmatically if needed. Super flexible! Next, we'll look at more programmatic patterns, like closing after an asynchronous action.

Episode discussion

No comments, yet. Be the first!