It's such a simple thing, but I've often found that modals can be a little tricky to work with. The markup and CSS are simple enough to write, but then you have to deal with where does the trigger go, where do you maintain the state, how do you control that, do you use the URI to activate and close the modal? And the answer might depend on the community. So with that in mind, I've been researching how the React community often creates modals versus the Vue community versus how you might do it in Livewire. I've also looked at Laravel Jetstream to figure out how do they work with modals using Livewire and Tailwind.

I've also looked at Laravel Jetstream to figure out how do they work with modals using Livewire and Tailwind. Why don't you come along for the ride? We'll call this modal-learning, let's cd in there, and let's open this in phpStorm. Now to get us started, why don't we create a new layout file? We'll put this in the resources, views, components directory, and I'll call it layout.blade.php. Why don't we keep this pretty simple? We'll use HTML shorthand here, modal-learning, and then we'll spit out our default slot content. Okay, so as you know with Laravel, when you install it, you're going to load a welcome view.

Okay, so as you know with Laravel, when you install it, you're going to load a welcome view. So why don't we load that, get rid of it entirely, and replace it with our layout file. And I'll start us out with here we go. And let's have a look in the browser. All right, view the source, and we are all set to go. Now to begin, why don't we switch back to layout and pull in a few things we need. First we're going to use Tailwind for the styling, I'm just going to reference that on a cdn. Perfectly fine for our needs, and I am pulling in Tailwind too.

on a cdn. Perfectly fine for our needs, and I am pulling in Tailwind too. Next we're going to use Livewire, so let's have a look there, laravellivewire.com, docs, installation. Let's go ahead and pull it in through Composer, like so. Come on back. Next we include the assets. You can do it directive style or HTML tag style. We'll just do the directive style. Notice styles in the head, scripts at the body, like so.

And it's going to be pretty simple. So to start, this is the only thing I'm going to paste in, and I'll show you why in just a second. What I have here is an incredibly basic bread and butter HTML layout. A header, a main section with a sidebar, and a footer. We've created this a million times. You don't need to see it again. It's just to give us a backdrop. Okay, so I'll let you take a look at that. Again, really simple stuff.

Okay, so I'll let you take a look at that. Again, really simple stuff. It's not relevant to the lesson at all, so let's just tuck it away. Now let's work on our modal. We'll start with a div here, and maybe our class will have a background of white. We'll have some padding all around it, and then here we'll say, I am a modal. Okay, let's have a look. First, I can't see the white background because the whole site is white, which is fine. We could give it a shadow, like so, and that helps a little bit. But why don't we also go to our layout file, and maybe now we should finally create that.

We could give it a shadow, like so, and that helps a little bit. But why don't we also go to our layout file, and maybe now we should finally create that body tag. And what I'll do here is give it a class of backgrounds. What should we do here? Gray. I can never remember if it's EY or AY. We'll just give it a light gray background, something like that, just to make the modal more prominent. Okay, next, it's clearly too large, so let's switch back, and we'll set a max width of

Okay. But now notice how it's showing up below our site. And of course it is. It occurs below the site. So why don't we change this up and say, let's set the position to fixed. And then I could do things like, well, to start, I could position it at the very top, and if I come up, that should be — yeah, it's going to be way up here now. So for example, I could also do right, and you get the idea. Now we could also do things like this, where we say, with tailwind, inset-zero, and that's going to set top, right, bottom, and left to zero.

Yeah, you're starting to get at least the gist of what we're doing here. Now for the buttons themselves, let's quickly create a button. So how about, I'll start with bg-gray-400, text-xs. How about uppercase? Some p-2 px-4, but that's probably too much. So how about py-2 px-4, rounded, and we'll keep the same rounded level there. text-white. And then how about when you hover over it, we'll set bg-gray-500. Can I do that?