Let's come on back to our confirmation modal. Now, before we touch Livewire, if you wanted to only use Alpine, one option would be to use the location hash in the URL. When it changes, we check to see, is it relevant to us? If so, display the modal. And there's even ways to do this with CSS only. But yeah, let's have a look here. If you wanted to take this approach, we could say, listen for the window.hashchange event.

If you wanted to take this approach, we could say, listen for the window.hashchange event. And in Alpine, I can say, listen for this event name, and it's called hashchange. Listen to that on the window object. And when it changes, let's just begin by console.logging the event that's associated with it. And I'll let you have a look. Okay, so we come on back.

If the location hash, as a result of that hashchange event, is now, and I'm going to hard code this for a minute, userDeleteModal, then set show to true. All right, so now we are listening for a specific hash, and then setting the display of the modal based upon that. So we come on back. I don't see it, but then if we add userDeleteModal, bam, I do see it, which means if I now switch back, assuming up here, this was some kind of form, I'm just going to simulate it right here for now.

assuming up here, this was some kind of form, I'm just going to simulate it right here for now with an <a> tag, and that's going to link to user delete modal. So now we're using an <a> tag that will link to and trigger a modal, which is kind of cool. And this has no relevance to the tag here, but imagine there's some kind of form that we'll set up later.

but imagine there's some kind of form that we'll set up later. Anyways, I load it. It's not styled right, but if I click on this, there we go. So then, and actually real quick, let's come on back here. And before class underline text-blue. Anyway, so whoops, text-blue-500. Anyways, we click on it, and it works.

Show it, hide it. Show it, hide it. So this is kind of a fun way to use the hash to control the display of the modal. And then of course, at this point, it sounds like we need to make this a little dynamic. So this is a Blade component. So I can just say, well, give me a name to use for this, or let's just be direct. Give us a hash that we're going to use to identify it.

So now we're passing in the name of the modal. And you know what? I keep saying name, but I called it hash. So let's change it back and then update this name. And we'll just have to have a note that the name needs to correspond to what the hash would be. Okay, so come on back, refresh, delete it. It works. We add the hash, we cancel, it disappears. So think about it.

So now if we scroll up, where's our link here? Yeah, so this would link to something else modal, and this would be how you deal with it. Refresh, I am another modal. And what's kind of cool about this approach is what if, let's come on down here. Think about it. What if we made this equal to, what is this modal's name? UserDeleteModal. UserDeleteModal.

User delete modal. User delete modal. So we could have one modal very easily trigger another modal. So, you know, whatever would be appropriate here. Retry, delete user, it doesn't matter. But have a look. We delete the User. All right, there's one modal. We click it, and now we have another modal. And it's really easy to switch between these using the URI.