Alright, check this out. We're going to create a modal using zero JavaScript. So here's the game plan. When I click on this link here, I want it to load a modal, and again, no JavaScript allowed. Alright, here's how we might do that using CSS. First, we need a wrapper. So we'll give this a name of overlay. This will take up the entire page and blur out the background somewhat. Alright, next, within here, we can have our modal.

I'm going to say, by default, you don't want to see the overlay. So we'll set visibility to hidden. So if I come back and give it a refresh, it now disappears. However, I could then say, but when the user clicks on this link right here, you'll notice it adds hash join to the URI. Now we can target elements based upon what that hash is. So we'll say right here, we'll give it an ID of join. So think of this as us saying, I want to link to the join modal. And in fact, let's just call it join modal. Okay, next we'll say, if the overlay is the target, in that case, I want to see it.

And in fact, let's just call it joinModal. Okay, next we'll say, if the overlay is the target, in that case, I want to see it. So now watch. I'll start from scratch. I don't see anything. But if I click on this, it now displays. Because again, joinModal is now the target. Overlay is the class associated with the target. So we're saying, okay, well, if joinModal is the current target, then I want to display it.

So we're saying, okay, well, if joinModal is the current target, then I want to display it. Okay, but now there's no way to hide it. All right, well, how about right here? We'll say, just set the href to nothing, and then I'll do a little X symbol there. Okay, so now think about what happens. At the moment, the hash is joinModal. But as soon as I click on it, the hash will become nothing. We remove joinModal. So at that point, this is no longer the target, which means this styling no longer applies.

Show it. Next, of course, we probably want this modal to be nicely positioned in the middle. So here's how we do that. Here's our overlay. So I'm going to position that absolutely, and then I'm going to have it go to the top, right, bottom, and left. So it effectively takes up the entire window, as you can see right there. Now I can set a display of flex, align the items to the center, justify to the center, and we have a perfectly centered modal. All right, let's come back, put that in there, and see how we're doing.

Okay, so let's see. Maybe 20 pixels. Maybe 15 pixels. There we go. We'll set a color of gray. Text decoration, none. You get the idea. All right. So we'll call that our close button, maybe. Paste that in, and now give this a class of close.

So we'll call that our close button, maybe. Paste that in, and now give this a class of close. And then we can't forget on the modal itself to give it a position context, or use tailwind, whatever you want. I'm just keeping it simple here. So show, hide, show, hide. Okay, the next step is we got to get rid of this red, it looks horrible. So we'll say right here, it can have a white background, but then we're going to dim the overlay like this. Say background color, we'll say #000 for black, but then I'm going to bring the opacity, or

Okay, what else? Well, a couple of things. First for our modal, I'm going to give it a little extra padding on the left and right. Next, at the moment, I have to click on this close button to hide it, but typically, if you click anywhere outside the modal, it should do the same thing. So here's how we do that. At the top of our overlay, we're going to add another anchor tag that links to nothing. So once we click on this, again, it will achieve the same effect as clicking the close button. So we just want this to wrap everything that is outside of the modal. So we'll give this a class of hide or cancel or whatever you want, and then take a look

So we just want this to wrap everything that is outside of the modal. So we'll give this a class of hide or cancel or whatever you want, and then take a look at what we're going to do here. So here is our anchor tag. Again, I'm going to set a position of absolute. We'll do background color of red just for the moment. We'll set a width of 100%, height of 100%. Aha! And now notice it takes up again the entire overlay. And because it's a link, that means if I click anywhere, we click it.

Okay, so at this point, everything's working. We have our basic CSS in place. But now, I want this to be as simple to use as possible. I don't want to have to remember, how do I create a modal again? I just want it to work. So here's what we're going to do. Because we're not using any JavaScript at all, we'll leverage Blade components, which you may not even be familiar with. Take a look at this. I'm going to cut all of that out, and I'm instead going to use a component called modal.

Take a look at this. I'm going to cut all of that out, and I'm instead going to use a component called Modal. Okay, in my sidebar, in the resources/views directory, we'll create a new file here. And I'll paste it in. Okay, so now, if we do nothing else, we still get exactly what we had before. But now, let's make it configurable. So generally, anything within the modal element will be custom. So I will replace that with our slot. All right. Now, if I come back here, anything unique can be inserted like so.

All right. Now, if I come back here, anything unique can be inserted like so. All right, so once again, if I refresh, click on join, I'm still going to get the same thing as before. But now, our code is much more reusable. But we still have one issue. I have hardcoded the name of the modal. That of course needs to be configurable. So we'll accept a slot for the name, and then I can pass it through up here. The name will be joinModal.

So we'll accept a slot for the name, and then I can pass it through up here. The name will be joinModal. Okay, and once again, I'm going to get the same thing. Okay, now, let's create a second one. Here's a modal for, I don't know, maybe it's your cancelModal. Leaving so soon. All right, so now we'll have a link to joinModal, but another one to cancelModal. And all we have to do is make sure the href points to the correct modal. All right, so we have our joinModal and our cancelModal. And if you want, you could even have one modal load another modal.

It all works seamlessly, and it just doesn't require that much work on your part.