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.
11 episodes•1 hr 1 min

Overview

Build your own modal functionality in Livewire, completely from scratch!

We’ll cover creating a re-usable modal wrapper, transitions, triggering modals from anywhere with our own Alpine functionality, trapping focus inside modals, layering modals correctly, and more.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!