Modals in Inertia
This episode is for members only

Sign up to access "Modals in Inertia" right now.

Get started
Already a member? Sign in to continue
Playing
03. The modal container

Episodes

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

Transcript

00:00
So we know at the moment that our modal is actually working and triggering but of course it doesn't look like a modal.
00:05
So we're going to take this episode just to style up this modal, give it some nice transitions, we're going to be using headless UI for this because it just provides a really nice way to create dialogues or modals out and if you already have a modal style then feel free to skip this but we're going to be adding some really useful bits to this which means we can customize the styles of modals for different modals so we can make this really flexible.
00:28
So it might be worth a watch anyway. Okay so our modal at the moment is looking pretty bare, we're going to go ahead and create out a base modal component. Now Laravel Breeze already comes with a modal component which is used for Breeze, so we're going to separate this out with a completely new modal in a new directory just so we don't get this confused
00:49
and let's go ahead and start to create this out. So we'll create our template, we'll create a kind of wrapper for this and we'll just have a default slot inside of there where the modal contents will go and at the top here we're going to be doing some imports when we start to use headless UI, so let's bring our script tags in at the top.
01:07
Okay so we'll go ahead and include this over here, so let's bring in our script tag here, make sure that this is script setup and let's go ahead and import that modal component, so this is what you will do every single time you create out a modal. So we're going to import modal from and let's go into our components, modals and modal.view
01:29
and then we can just wrap this, so let's wrap the content that we have in that modal and we should be good. So there should be no change over here at the moment when we open this modal, we just still see this at the bottom but now every single modal that we create will have this modal wrapper which means that we can very easily just style up this base modal and have all our modals look very similar.
01:53
So to get started we're going to go and pull in headless UI because we need some nice transitions here and we want to make sure that this uses a nice headless component which works really nicely, so we're going to go ahead and do an npm install on headless UI for view and in here we'll just start to import what we need,
02:12
so the things that we're going to be using here are a transition route, so let's pull in the transition route from this package, we're going to be using a transition child from this package as well, we are going to be using of course the dialogue component and we're going to be using the dialogue panel
02:30
which is the panel itself that we see, the dialogue is the overall thing that we see and of course this comes from headless UI and view, great! Okay so let's start to swap out some of the things that we want here, we've got a transition route in the overall just here,
02:49
we want this to appear and then we're going to choose this to appear as a template which is really important because this wraps our dialogue so we don't want this to be just a div or anything like that, so inside of here we're going to have a dialogue which wraps all of this, so let's create our dialogue in here and let's get rid of our slot for now
03:09
because we're not quite sure where that needs to go at the moment and we'll make this dialogue as a div and then we'll just try and get this sort of working on the page, so let's go ahead and use our dialogue panel in here to start with and then this is where the slot content is actually going to go,
03:27
so let's add in our slot back inside of the dialogue panel itself, okay let's just take a look at what this looks like so far, so at the moment this doesn't look good and yeah so it's missing a show and true, so the transition route needs to know when to show this,
03:42
so let's go ahead and just set show to true for now just so we can get that working, okay so when we open the modal now at the moment it looks like it's always shown, so I can't click anywhere on the page because this is being shown, but the dialogue panel is where our content goes,
03:58
so let's just pull this down, we can't see anything at the moment, so let's style up this dialogue panel so we can actually see something, so let's go ahead and choose what styles we want for this, so we will go and set a background of this to white,
04:12
we'll give this some padding, let's just check this and this probably still won't be shown at the moment, so let's just around our dialogue panel add some styles to get this looking good, so let's go ahead and create a div around here,
04:27
and for the outer wrapper of this we want this to be fixed, modals are going to be in a fixed position, we'll use inset zero to position this and we'll set overflow on the y-axis to auto, and then just inside of here let's go ahead and position the dialogue modal
04:46
within the overall dialogue which takes up the entire page, and we'll set this to flex so we can center it within the middle of the page, so we'll use item center and justify center as well, and we'll set text to center as well,
05:02
and we'll set a minimum height of full, so basically we have this transition route which we're going to kind of ignore at the moment because that's where the transition of the dialogue panel comes in, but we have this overall wrapper which has a fixed position,
05:15
so it's just fixed for the whole of the page, whole of the page inset zero will set this to the entire width and height of our page, and then we use the inner div here to position the actual panel itself in the very center of this overall fixed full width and full height wrapper,
05:32
so hopefully that makes sense, so now you can see on the page we've got something that kind of resembles a modal, it's right in the middle of the page, remember the dialogue element itself takes up the entire width and height of this screen,
05:43
and this is what sits in the middle just here based on how we've positioned it, so now we can just go ahead and start this up, so let's make our dialogue panel look a little bit better, and then we will get the background in there to make this look better,
05:55
so let's set the text specifically to left here, that kind of makes sense, and we'll set a line to middle, and we'll set the rounded excel for our corners,
06:05
we'll set a shadow to excel as well, we'll set the width to full because that's going to take out the full width of the inner container, and then we'll set out a max width of medium or large, whatever we want the size of this to be,
06:20
and later we're going to be customizing this, so we can take this and change the styles based on different modals, so if you have a modal that's a little bit bigger, you'll be able to override any of these classes,
06:30
these default classes in here, okay, I think that's pretty much it, so that looks a lot better already, it's kind of what we saw from the introduction,
06:37
we've got a nice shadow, let's style up the background of our modal, and that should nicely bring everything together, so we're going to do this just above here,
06:46
because this needs to sit behind this, so let's just create out a div, we're not going to put any content in here, and it's pretty much going to have the same styles as we've already used,
06:54
fixed and inset zero, because it needs to take up the full width and the full height of the page, and then we can just set a background on this, so let's choose background slate 800,
07:03
and then let's set this at 75 opacity with tailwind, and that should give us the following, so that's the component that we've just created here, and of course our modal sits just in the front,
07:14
so now we need to figure out how to trigger this modal, because at the moment we've set true on this overall transition route to just a true value, so the way that we do this is very simple,
07:27
we import the value that the momentum modal package gives us, and this exposes what we have, so we're going to go ahead and import use modal from momentum modal, and with this composable we can go ahead and extract out a load of different things,
07:45
the first thing that we're going to extract out is show, so let's go and say use modal, and that's it, now this show value is a boolean whether or not this modal is currently visible,
07:55
so we can apply that to our transition route to only show the modal when the modal should be shown, so let's head over and just give this page a refresh, now we're on the page itself at the moment,
08:07
so of course it makes sense that it is always going to be there, but if we go over here to our dashboard and hit open, you can see sure enough it opens, and we can't close it off at the moment,
08:20
we'll get to that in a second, let's go ahead and introduce some transitions now, so we're going to go ahead and we've already got our transition route here, we want to transition the dialogue panel opening,
08:31
so to do this with the transition route, anything inside of this that we want to transition, we just add in a transition child, so we're going to wrap the entire dialogue panel in this transition child,
08:43
and then we can just apply normal transitions like we would find in view, so again we're going to set this as a template, because we don't want this set as a div or anything like that, and then we can just use our enter,
08:54
our enter from, our enter to, our leave styles, leave from,
09:03
and leave to, now this might seem a little bit overwhelming, particularly if you've never worked with transitions before, but it's actually pretty straightforward,
09:11
enter are just the styles that you want to apply as this is entering, and leaving are the styles that you want to apply when this is leaving, so this will typically be the transition that you want to apply, so we'll see that in just a second,
09:24
and then enter from is how you want it to start, enter to is how you want it to end up once it has shown, so we kind of want it to sort of come in and the opacity to increase, and then leave from is how it starts just before it leaves,
09:37
and leave to is how it ends up after it's disappeared, so again this is probably going to be opacity of zero, so for our transitions here we can set these using tailwinds, we'll set a duration of two or three hundred,
09:49
and we'll set these to ease out, now we're going to have exactly the same for when it enters and leaves, just to keep things simple, enter from is going to start at an opacity of zero,
10:00
because obviously what as it transitions we want it to go from zero to a hundred, and we'll set the scale and we'll bump the scale down to something like 90 or 95, so when it enters and when we it's fully visible, and how we want it to end up on the page,
10:15
of course we're going to have an opacity of a hundred, because we want it to be completely visible, and the scale is going to be a hundred, so just a hundred percent of the natural height that this sits at,
10:23
and then this is really easy, when we just before we leave we want this to be an opacity of a hundred, and a scale of a hundred, and we want this to when we leave down go to opacity zero,
10:35
and go to scale 95, so it will sort of fade out and look a little bit smaller, so that's basically our transitions done, you can change these around,
10:44
make these as complex as you want to, but let's just have a look at the difference here, and you can see that as I refresh the page this sort of jumps in a little bit, it's probably a little bit easier to go to the dashboard and click on this,
10:55
and you'll see that that sort of jumps in, that opacity increases, and that scale increases as well, but we also want to apply a transition to the background here as well,
11:05
so we just do exactly the same thing, in fact we can copy this entire thing and just make a few tweaks, so let's go ahead and wrap our transition child with the background, that is pretty much it,
11:20
so this now is going to look a little bit better, of course it doesn't look quite right, because we don't really want to scale our background, because then we end up with these edges here,
11:30
so we'll go ahead and get rid of the scale here, we're not going to need any of them, and we'll just leave the opacity on here, and again you can do pretty much anything you want with this,
11:40
okay let's check this out, and there we go, so we get a nice fade in for the background here, and we get this sort of come more to the front and look a lot nicer,
11:50
so there we go, we can trigger our modal, it looks a lot nicer, we've got a common wrapper that we can use,
12:00
but there's a couple of things, we can't close this at the moment, we also can't adjust these styles based on different modals, we've got a fixed width for this modal,
12:10
we might need a bigger modal, we might need a smaller modal, so let's tweak this over the next couple of episodes, so it behaves as we need it to.

Episode summary

In this episode, we focus on taking our working (but very plain) modal and turning it into a polished, flexible component. Right now, the modal pops up, but it doesn’t actually look like a proper modal—so that's exactly what we're addressing!

We start by creating a fresh base modal component (separate from Laravel Breeze's default modal to avoid any confusion). We use Headless UI to handle all the dialog and animation logic, which makes things a lot smoother and more customizable. Even if you already have a modal, it’s worth watching since we cover techniques for reusing and tweaking these styles for different instances.

Once we’ve set up the component, we get into styling: making the modal appear centered, adding a shadow and rounded corners, and ensuring it overlays the rest of the page. We also add a nice dark background overlay with a subtle fade transition to really make the modal stand out.

We wire up the transition and rendering logic—so now, the modal appears and disappears with smooth scales and fades, both for the content and the background. Finally, we set things up so it’s easy to customize the modal’s size and style in the future (though closing and further tweaking the modal will come in the next episodes).

By the end of this video, you’ll have a slick, reusable modal container that’s already looking great and is ready for further customization!

Episode discussion

No comments, yet. Be the first!