Learn Alpine.js
Playing
14. Project - Modal with custom events

Episodes

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

Transcript

00:00
We're now going to take what we've learned about events and build our own simple modal functionality. So we click a button and it opens a modal. And within this, what we're also going to do is discuss dispatching our own custom events
00:13
which we can pick up from anywhere on the page. That's pretty much what we want to do with modals. We want some sort of button which triggers a global modal that we have on our page. Now this is really, really simple functionality, but with this example, you'll get the general
00:26
idea and you'll be able to expand on it as you learn more about Alpine. So we've got nothing on the page at the moment. Let's first of all look at the markup and the actual styling. So we're going to have a kind of overall wrapper for our modal, so let's give this a class
00:41
of modal wrapper. Again, we're just going to implement really simple styling here. And inside of this is going to be the actual modal window itself. Let's go ahead and just add some really quick styles just at the top here, just to get this
00:53
started. So modal wrapper, let's go ahead and add the styles in for this now. This is going to have a position of absolute, so we can fix it to the very top and very bottom and left and right.
01:09
And we'll set a width of 100%, a height of 100%. And let's go ahead and set a background color to this. And let's just use RGBA here and say black with an alpha of 0.5, so that's just half the opacity.
01:23
So let's go over and just give that a refresh. And it doesn't look like anything's showing, so yeah, we just spelt modal wrong. Let's go ahead and update that, give that a refresh, and there we go. So that's our kind of modal wrapper.
01:34
Now just to make this a little bit better, let's set the margin on the body to 0. And there we go. So that's our background for our modal. Now the modal content itself, let's go ahead and add this in, spell it properly this time.
01:47
Let's just set a width of 100% by default to this. And let's go ahead and set a max width on this of, let's just say, 30%. We'll set the background color here to white. And let's go ahead and set some padding on this to 20 pixels.
02:05
So let's go over and just give this a refresh. And there we go. So there is our actual modal. Now to make this in the center, let's just add a display of flex to our overall modal
02:16
wrapper. And let's align these items centrally. And let's justify this content in the center as well. So we basically just end up with a modal in the middle.
02:27
Great. So let's add some just content to our modal. It doesn't really matter what it is. So I'm a modal.
02:35
And there we go. Great. So that's our modal. Very, very simple.
02:39
So let's hide this by default. And of course, we want to hide the entire thing. So let's add some X data onto this. And let's say open and false.
02:48
So what we can do now, if we just pull each of these lines down just to make this a little bit tidier, we can go ahead and add an X show to this and say if it's open. By default, it's not. So we just won't see anything.
03:00
But we'll have some kind of button outside of this component, which will go ahead and trigger that modal. So let's go ahead and add that in now. And we'll look at that in a minute because that involves dispatching a custom event and
03:12
picking that up on the window object, which sounds more complicated than it is with Alpine. Now if we go ahead and just focus on the modal itself, first of all, let's set open to true. And let's figure out how we would close this modal.
03:25
Now typically within a modal, you would have two methods of closing this. You'd either click outside anywhere in this dark area, outside of the main modal content. So I could click here or here to close this off. Or I would press Escape on my keyboard, which I've just done.
03:40
But of course, at the moment, nothing is happening. So let's focus on clicking outside. We covered that in the last episode. So what we can do is on the actual modal itself, the white box, we can say X on and click,
03:54
use the outside modifier, and set open to false. So if we come over and give this a refresh, clicking inside of the modal does nothing. Anywhere outside of that closes it off. So already, just with, again, a couple of events here and a property to show whether
04:11
this is open, we've got some really nice modal functionality. Now what we want to do is add the escape event. We kind of already know how to do this. So let's go ahead and do this on the overall modal wrapper.
04:24
And let's say on key up, use the escape modifier, and set open to false. Let's check it out. So let's go over, give this a refresh. I'm going to click outside just to make sure that's still working.
04:39
I'm going to press escape on my keyboard, and nothing is actually happening. So by pressing escape on my keyboard, which I'm doing repeatedly right now, it's still not doing anything. Let's find out why that is.
04:51
So when we do press on key up escape, remember that this is a div. It's not actually an input. So if this was a text area, that would work because we are currently inputting content into that text area.
05:05
So what we're going to do is look at a further modifier, which is on the window object. So if we get a global escape key down, this will listen globally, then do what we ask. So if you're applying keys or events anywhere, globally, you need to use this window modifier. Let's give this a refresh.
05:25
I'm going to hit escape on my keyboard. And there we go. The modal has been closed. So we can kind of use what we've learned about that window modifier to trigger the
05:35
modal. And what do I mean by that? Well, let's go ahead and on this button, use x data. So we can actually use this as an Alpine component.
05:44
Bear in mind at this point, this is a separate component to this modal. We wouldn't want this button inside of the actual modal itself. So we're having this completely separate. So let's go ahead and say on click.
05:57
Now this is where we want to trigger the modal. How would we do that? Because we're not within this component. We can't say something like open true, because there's no open property on this button.
06:09
We could add that in there, but it would be useless. We want to control this component, regardless of where this button that triggers the modal is. So what we can actually do with an Alpine is we can dispatch an event globally.
06:22
So let's go ahead and just call this open modal. You can call that whatever you want. It doesn't matter what you use. So let's go over and try this out.
06:30
Now let's first of all make sure we set open to false, so we don't have that by default. And by clicking on that, we have now triggered an event. We can't see anything happening, but we can pick up on this event from any of the Alpine components or even within native JavaScript.
06:46
So we're going to go ahead and say x on. Now we have a custom event name. We can say open modal. So that's our custom event.
06:55
Now let's go ahead and again say open to true, and guess whether this is going to work or not. You probably already guessed. It's not.
07:03
Clicking on this does absolutely nothing. That's again because we have dispatched an event on the window object, which means we need that window modifier. So let's try this out.
07:12
I'm going to go ahead and hit trigger modal. That opens. And now we have built some very simple modal functionality with just a few events. Now this doesn't directly relate to this modal, but I'm going to give you an example
07:28
of sending data along with your events as well, which could be really important. So let's say that we had just a wrapper. I'm just going to have a contrived example here where we had some kind of message that we wanted to show.
07:39
By default, that was empty. And actually, this could be some kind of pop-up like a message in the bottom of the screen telling a user that they've performed some sort of action. We might actually cover this as a practical example.
07:50
I think that would be good. But let's go ahead and just get this working for now. So with this message, what I want is some sort of button. It doesn't matter.
07:59
It doesn't have to be a button. To go ahead and say, well, when I click this, I want to dispatch an event called message. And I want to send some data along with this to be set inside of here. So how would we do that?
08:11
Well, simply with dispatch, we can send data as a second argument. So I can say, hello there. So let's just go ahead and say set message on this button. Let's go over.
08:24
The goal of this is when I click on this, it sets the message within this other component and outputs it in here. So let's output the message, which is at the moment just empty. So let's say x text message.
08:36
And just to double check that that actually is outputting, there it is. Now we want to pick up this event on here. So we're going to say x on message window, remember. Now we want to set the message to the data that we get here.
08:51
So how do we do that? Well, let's go ahead and console log on the event object, first of all, that we get through from any event that we have in Alpine. And let's see where that data is actually being sent through to.
09:02
So let's give that a hard refresh, hit set message. And it's not actually working. So let's have a look here. And yeah, we didn't add x data to our button.
09:10
So that's not actually an Alpine component, and it's not being triggered. So by clicking set message, we get a custom event. So that's what's going to be created when Alpine uses the dispatch method. Now in here, you can see you've got detail, which is at the moment just a string.
09:26
Now that could be an object. We'll take a look at that in just a second. But in this case, we can just go ahead and set the message from that event property. So we can say message equals and assign event detail.
09:40
And let's go over, hit set message. And there we go. So effectively, from another location, we've sent a message across to another component and set the message there.
09:51
And like I said, you can use objects here. So for example, I could say message is hello there. And you might have some other data like the type of message. For example, that could be an error.
10:03
So we'll just keep the message in there for now. But let's go ahead and say event.detail.message, because that's now an object that exists within detail. Let's go over, give that a refresh.
10:14
And you can see it works in exactly the same way. So a practical example plus a taste of dispatching your own events inside of one component and picking them up in another component, which can be really useful aside from Alpine state management functionality to share data between different components.

Episode summary

In this episode, we roll up our sleeves and build a basic modal using Alpine.js, putting much of what we've learned about events into action. We start from scratch with just the markup and some quick styling to get a modal displaying nicely in the center of the page. Then, we make sure the modal can be closed by clicking outside of it or by pressing the Escape key—showcasing how to listen for different kinds of events.

The fun part comes when we introduce the concept of custom events. You'll learn how to trigger the modal from anywhere on the page by dispatching a custom event from one Alpine component and listening to it in another. We break down the steps for sending not just the event, but also passing along custom data!

To wrap things up, we explore a practical example where a button fires a custom 'message' event (with some extra detail), and another component listens for it and displays the message. By the end, you'll see how dispatching custom events can help keep your components decoupled and way more flexible. This is a foundational skill whether you're managing modals, notifications, or any kind of cross-component communication.

Episode discussion

No comments, yet. Be the first!