You should now be comfortable with using Livewire to control and toggle the state of an associated modal. But what about the situations where a modal isn't linked to a Livewire component? Maybe something like this. A join button that sits somewhere on your site. And when you click on it, we want to see a modal pop up. Alright, how do we allow for that using only Alpine? I'll show you. Let's go to our welcome page. And here's what I've set up.

Let's go to our welcome page. And here's what I've set up. A panel, and within it, a single button. And that's what you see here. Okay. So when I click on this button, a modal should display. So what do we do here? Do we add an onClick, a simple browser event? alert hello. Click it.

It might be nice to have some kind of global entry point. Let's play around with that idea. So in your app.js script, we're going to have window.modals. And maybe this is a simple object with a show method. We need the name of the modal. And then we'll check it. Show the modal named name. Okay, so we refresh the page, click it. All right, we're starting to get somewhere. Next, we've assigned a name to our modal, but we haven't yet created it.

All right, we're starting to get somewhere. Next, we've assigned a name to our modal, but we haven't yet created it. So that's probably our next step. So in the last several episodes, we began working on this. But the only change I'm going to make here is if we're not using Livewire for this example, we will remove entangle. Next, slot for the title, join. Let's do another one for the, what else, body. Here are some details about our plans. And then finally, one more for the footer.

Here are some details about our plans. And then finally, one more for the footer. And maybe that will be a button called close. And we're kind of breaking our rule here. But if we click on it, we could set show to false. Anyways, this might be a continue button. It might link you to the signup page. It doesn't matter. All right, so we have our joinModal, but we haven't named it yet. So if we scroll on up here, yeah, we don't accept a name anywhere, do we?

All right, so we have our joinModal, but we haven't named it yet. So if we scroll on up here, yeah, we don't accept a name anywhere, do we? Why don't we declare a name as a prop? And maybe that can simply be our ID. And then what I'll really do here is put attributes. Like that. Okay, so now we come on back. Actually, you know what? Why don't we make this a little more unique, since it is an ID, joinModal. We'll give this a name, or maybe I should just call it ID, because it is being set to

Why don't we make this a little more unique, since it is an ID, join modal. We'll give this a name, or maybe I should just call it ID, because it is being set to the ID. Hmm, we'll think about that. But nonetheless, we should be on the right track. So of course, at the moment, we don't see it, because show is set to false. But if we force that to be true, here's our ugly modal. I forgot to set the background color there. Let's fix that real quick. So maybe we'll go with background blue.

Let's fix that real quick. So maybe we'll go with background blue. And then let's style the heading. Alright, good enough. You get the idea. So now, of course, we don't want to see it, so we'll turn that off. And we need some way to say, when we click on this button, find the modal with the ID, joinModal, and set the show property to true. Okay, well this seems like a decent use case for events. And maybe the event is called, I don't know, modal.

Okay, well this seems like a decent use case for events. And maybe the event is called, I don't know, modal. Listen for a modal event that might be fired on the window object. And when it comes through, we could start by saying show to true. I think this will break down if you have multiple modals, but we can start with this. Alright, so are we on the same page? Alpine allows us to do effectively this, where you can say, okay, listen for an event name. That can be anything you want. We're just calling ours modal. Listen for a modal event on the window object, and when it comes through, we will update

We're just calling ours modal. Listen for a modal event on the window object, and when it comes through, we will update our show display to true. Okay, so how do we fire the event? Well, I'll show you. We could say window.dispatchEvent, and we'll create a new custom event here called modal. And that should be enough to get us started. There you go. So we're using a basic event system to communicate here. But the only problem here is, if you have multiple modals on the page, they will all

So we're using a basic event system to communicate here. But the only problem here is, if you have multiple modals on the page, they will all display in response, because they're all going to pick up on that event. So we have a couple choices. One, we could listen for not a generic modal event, but a specific event, like modal followed by the name of the modal you gave us. That way, only the single instance will respond. Another option would be set show equal to some kind of check. Like maybe we pass through the name of the modal to toggle, to show. We can grab that through event.detail, and we'll talk about that more in a minute.

Like maybe we pass through the name of the modal to toggle, to show. We can grab that through event.detail, and we'll talk about that more in a minute. But if that is equal to the name of the modal. So how do we grab that? Maybe we also store it here. And then, yeah, that allows me to do something like this. Okay, so we're going to set the show state for this particular modal equal to the result of this check. Is the modal associated with the event equal to the name of this particular modal? If so, set it to true.

Is the modal associated with the event equal to the name of this particular modal? If so, set it to true. Otherwise, set it to false. So now, if I were to come back and give this a refresh, we're going to give it a run. But this time, I need to pass through the name of the modal. And when you're firing a custom event with JavaScript, you can pass that through as part of the detail. So if I said, what did we call it, joinModal? There we go. It works.

There we go. It works. But if we refresh, and we have some other kind of, maybe a signUpModal, it's not going to display. Okay, so if we were to grab all of this, let's come back to our welcome.blade.php page. Remember, this would be in one of your JavaScript files. But we're ultimately going to do something like that. Let's clean this up a little bit. Like so. And now, I'm going to replace this with the name of the modal.

Like so. And now, I'm going to replace this with the name of the modal. So again, scroll on up, modals.showJoinModal. That's now represented as name. And then we pass that through as part of the custom event. All right, let's give it a shot. Refresh. Open it. And there you go. We can now pretty easily toggle this modal from anywhere on our site.

And there you go. We can now pretty easily toggle this modal from anywhere on our site. Now maybe, just as a quick example, you had another one. This will be contactModal. Contact us. You get the idea. Now if we wanted to add another one here, these should work independently. Let's give it a shot. name.showJoinModal. contact.showContactModal.

name.showJoinModal, contact.showContactModal. And of course, style this however you want. You might even want to set a minimum width here to fit what you need. But you get the idea. It ends up being pretty easy if we use a basic event system. Anyways, I'll get rid of this. Keep it simple. So now the final step, if you want, you might even want to wrap this up in a Blade component. What if you called it joinModal?

So now the final step, if you want, you might even want to wrap this up in a Blade component. What if you called it joinModal? And then, right here, or actually, maybe we even have a Modals directory. And then within there, you could have join, whatever you want. Paste that in. Now, if we come on back, yeah, you could do, in this case, Modals.join. And generally, things like this, you want to place this at the bottom of the page just before the closing body tag. And this is to ensure that you don't get locked within a parent with maybe a fixed position or there's something overflow-related that's causing it to cut off.