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
06. Redirecting on close
01. Introduction and demo
2m 24s
0%
02. Setting up and triggering our first modal
7m 45s
0%
03. The modal container
12m 18s
0%
04. Three ways to close a modal
4m 57s
0%
05. Customising individual modal containers
2m 24s
0%
06. Redirecting on close
2m 30s
0%
07. A practical example with a form
6m 8s
0%
08. Passing props to modals
3m 22s
0%
09. Programmatically closing a modal
1m 52s
0%
10. Modal flow examples
2m 25s
0%
Transcript
00:00
So the nature of the way that this modal works is that when we click on a modal, we of course go through to the route that we registered in our web routes. Now, this is great because it means
00:12
that you can redirect people to specific pages. For example, if this was a login modal, you'd want to tell a user to go to slash login and then show this, for example, when you're
00:21
linking through to your site. But when we close the modal, notice that the URL stays. That means that for a user who has just closed off a modal, if they refresh the page, we're going
00:33
to get the modal back up again. And it's not great user experience, and it can be really, really annoying. So we're going to look now at how
00:39
we can redirect the user back to where they started once the modal gets closed off. Now, we need to think about where we need to do this. So let's take a look at the modal.
00:50
When I close the modal off, when do we want to redirect? Well, we want to redirect when the whole thing has finished transitioning and it's completely closed off. So again, what we're going to do is
01:01
lean on a hook directly from one of the components from headless UI, and that is the transition child. Now, what we have in here is an event called after leave. So we know that we've got our leave transitions.
01:15
We basically want this to happen when the opacity is at zero and the modal is no longer visible. So we can do this on here or the other one. It doesn't really matter.
01:23
So after we leave this modal and it's fully transitioned to the point where it's disappeared, then we want to redirect the user to where they came from. Now, how do we redirect?
01:34
Well, again, very, very simple. With this package, it exposes a redirect function that we can call. So let's go ahead and add that redirect function just into
01:44
here, and we should be good. So let's take a look at the behavior of this now. I'm going to head back to the dashboard. I'm going to open the modal.
01:53
Of course, the URL changes. When I close this, after we have finished, you see there was a slight delay. After we have finished transitioning this
02:01
and it's disappeared, then we're back on the dashboard. That now means that if a user closes the modal and we refresh the page, we, of course, see the page, and we don't see that modal reappear.
02:12
So there we go. Again, really, really easy to work with this. We just need to know where to trigger this from, and the most sensible way to do this
02:18
is when the transition finishes, and then we just invoke redirect, which takes us back to the page that we ended up on, which is much nicer in terms of user experience.
10 episodes• 46 mins•1 year ago
Overview
Effortlessly add modals to your Inertia applications with the momentum-modal package.
In this course, we’ll get modals set up, design a customisable modal container with transitions, then cover everything you need to know about working with modals in your Inertia applications.
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!