Building Modals in Livewire
This episode is for members only

Sign up to access "Building Modals in Livewire" right now.

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

Episodes

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

Transcript

00:00
So we've got our modal opening, but there's a massive problem here. We just can't close it unless we physically refresh the page,
00:07
which is not good. So now we're going to look at three ways that we can close the modal. Let's start with the first, which
00:15
is just clicking outside of the modal itself. So all of this stuff happens within the modal wrapper. So if we come down here, we've got this, which is the background of our modal.
00:29
If we just get rid of that temporarily and hop over and have a look, you can see that we don't see that background. So essentially, what we could do is target this,
00:38
and when we click on this, set visible to false. So let's go ahead and do that with Alpine. Remember, this entire thing here is an Alpine component. So we're going to say x on click,
00:48
and we are going to set visible back to false. Now, we're going to change this later, because when we get to layering modals, we're going to see an issue with this.
00:56
But let's go ahead and roll with this for now and just make this work. So if I click anywhere outside of here now, anywhere in this gray area, it's going to work,
01:05
but I can still interact with the content directly inside of the modal. Great. OK, so the next one is doing more or less the same thing,
01:13
but when we press the Escape key. So what we can do is attach an overall Escape window event and just close off our modals. Now, there is a problem with this approach
01:24
in that with the global Escape key, we can't target the very top modal. So what this will actually end up doing when we get to a later stage in the course
01:35
is close all modals off. We saw that from the introduction, but let's go ahead and implement it because this is a really important and kind of expected
01:42
way to shut a modal off. So we're going to go ahead and say x on. We're just going to do this on the overall wrapper, and we're going to say key down.
01:50
We're going to choose the key that we want down. So that's going to be the Escape key. And then really importantly, we say window. So we're listening on the global window object for this.
02:00
And then in here, we just want to do something. So that's pretty obvious. We're just going to do exactly the same thing and set visible to false here.
02:09
And if we go and hit our Escape key now, you can see that it shuts off. So we can click outside here, and we can hit the Escape key. Now, just a little bit of background
02:20
as to how this is happening if you've never come across Entangle. What's actually happening here, when we set visible to false, as in this property here,
02:29
because we've used Entangle here, what this is doing is filtering back up to our Livewire component. So when we actually just change visible to false here, over in our first modal, this value
02:43
is actually changing as well. So that's why Entangle is so important here, because we want to be able to control this both ways. We want to be able to open and close
02:52
this component from the component itself, but also just from Alpine, where we've Entangled this. OK, so we've gone ahead and implemented two ways to close this.
03:02
The last way to close this is a button somewhere within the content. So I'm not going to style this out to create an x icon, but you can go ahead and do that if you want to.
03:12
So let's go ahead and create our button here. And once again, this is going to be the same thing, x on click. And we're just going to set visible back to false here. And we're just going to say Close.
03:23
So we'll just do that under the slot content. And we now have a Close button, which we can click and close the content off. But of course, we can still interact
03:31
with the rest of the content. So this might seem pretty straightforward, but later we're going to come across a problem when we want to layer modals.
03:38
So we are going to change the solution for showing and hiding modals as we go through. But at least now, we have a very simple modal that we can open and, really importantly, close off as well.

Episode summary

In this episode, we finally tackle a big issue: our modal opens just fine, but up to now, there's been no way to close it without refreshing the page! Obviously, that's not ideal. So, let's fix that by exploring three different methods to close the modal.

First, we make it so that clicking outside the modal (on the gray background overlay) will close it. This is a quick and easy win, using Alpine to react to clicks and set the visible property to false. We also talk briefly about why this solution needs to be improved when we get to layered modals later on, but for now it gets the job done.

Second, we add support for closing the modal with the Escape key. This involves listening for a global Escape keydown event and, again, setting visible to false. We discuss how this approach works and its benefits, but also mention that it closes all modals at once if multiple are open, which will need to be addressed in the future.

Third, we add the classic Close button right inside the modal's content. Clicking this button will close the modal just like the other methods. You can get fancy and style it as an 'X' if you like!

Throughout the episode, we look at how all these methods use Alpine's reactivity and Livewire's Entangle feature to keep modal state consistent between the frontend and backend.

By the end of the video, we have a modal with three convenient ways to close it, and we get a sneak peek at challenges we'll solve later when we start layering modals.

Episode discussion

No comments, yet. Be the first!