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
09. Programmatically closing a modal

Episodes

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

Transcript

00:00
so let's go back to our example modal that we created earlier and look at programmatically closing this modal but when we don't press a button, now we touched on this earlier and you
00:10
might have already picked up how to do this but just in case let's run over this so we are completely clear, so we're going to go ahead and open up our example modal and we know that we did a couple of things in terms of closing, we attached the event to when we hit the escape key, clicked outside and we also pass closed through as a slot which we can use directly within this template but if
00:31
for example this button did something else, so we'll just invoke a do something function here and this was defined at the top here, how would you then close the modal? So let's go ahead and say do something and we'll just go ahead and pretend that we are doing something inside of here, we want to close the modal once that is finished, so just think of an action that you
00:52
want to perform when you do something within your modal and then you want it to automatically close off once that action is finished, well in this case we can just do exactly what we did earlier so it's kind of obvious but these things can get missed, we're going to go ahead and import use modal from the momentum modal package and then we're going to go ahead and extract out from the
01:11
use modal composable the ability to close that and that's pretty much all we need to do, so inside of here we do something, perhaps tidy something up or do some sort of task and then we just invoke close inside of here, so we're not directly doing this from here, we are doing something and then programmatically closing this on some sort of condition or whatever we need to do via importing
01:35
this composable and using it, so let's just check this out, hit open modal, remember this button now calls that do something function and then of course it closes off, so really really simple but it's important to cover that because that's quite a common thing that you need to do, close that off programmatically.

Episode summary

In this episode, we dive back into our example modal component and focus on how to close it programmatically—that is, not just when a user clicks a close button or hits escape. This is super handy for cases where, after some action in your modal (like submitting a form or completing a task), you want to close it right away in your code.

We review the ways we've already closed the modal before, such as hitting the escape key or clicking outside the modal, and then look at scenarios where closing the modal needs to happen as part of a function (for example, after executing some logic in a button handler).

You'll see how to import the useModal composable from the momentum modal package and grab the close function it provides. We'll walk through updating a button so that it runs a doSomething function, performs any task you want, and then calls close to dismiss the modal programmatically. Super simple and super useful—this trick will come up a lot in real apps!

Episode discussion

No comments, yet. Be the first!