Building Modals in Livewire
Playing
01. Introduction and demo

Episodes

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

Transcript

00:00
So welcome to this course on building modals with Livewire.
00:04
Essentially what we're going to do here is build out the ability to have one modal design, we want to be able to create a Livewire component for any of the modals, which we can have Livewire functionality within the modal, and then basically we just want to be able to trigger this from anywhere in our app using Alpine.
00:24
So let's take a look at how this actually works. The design is not great here, but let's go ahead and open up this first modal. Now there's quite a lot going on inside of this modal, I'm going to explain what we're doing there in a minute,
00:38
but we can go ahead and do things like you'd expect, we can click outside to close this, we can go ahead and hit the escape key on the keyboard to close this, and we have a button inside of here as well, which of course will close this.
00:51
Now we have a second modal just to demonstrate that this works with any components, we can just go ahead and create a new component and have it work as a modal, but let's take a look inside of this first modal again. So I've created out a really simple increment in here just to show you that
01:08
all of the Livewire functionality that you'd expect is going to work inside of this modal, so you can do pretty much anything that you would normally do with Livewire inside of the modals that we're going to build. The other thing that we're going to talk about is opening a second modal from anywhere,
01:25
and that includes modals that you already have open, so as you can see here if I click open second modal, that's opened that second modal on top of the modal we already have, and again this works in exactly the same way,
01:37
so I can click outside just to close that top modal, or I can press escape just to close them all off, unfortunately with the escape key we can't really target an upper element on the page, but clicking outside of that or going ahead and just clicking close will work.
01:54
Now what we're also going to do is look at programmatically closing modals inside of modals when something happens, now by that I mean for example if you were building out a form that you wanted to submit inside of a modal,
02:08
of course when that form is submitted and you've done something with that data, you might want to go ahead and close the modal off once that form has been submitted, now we don't have a form here but I've actually implemented when this counter gets to 10 it will just automatically close the modal,
02:24
so something fun we're at 9 at the moment, when I click 10 you can see that the modal shuts off, so you can just use the code that we're going to write out here to just shut the modal off when you submit a form or anything else that you need to do,
02:36
so that's pretty much what we're building here, let's head over to the next episode, get set up by just clicking and opening up a modal, and then we will add all of these nice touches to it as we go through the course.

Episode summary

Welcome to the course on building modals with Livewire! In this first episode, I give you an overview of what we'll be creating. We're aiming to set up a flexible modal system where you can use one modal design but inject any Livewire component you like, so you get all of Livewire's power inside your modals. We'll use Alpine.js for triggering modals anywhere in our app.

I start out by demoing what we'll build: opening modals, closing them by clicking outside or pressing Escape, and even stacking modals on top of each other. You'll see that everything in your Livewire components keeps working inside the modal, and I'll show this off with a simple counter as a preview.

Another cool feature we'll cover later is programmatically closing modals when something happens—like after submitting a form. For now, you'll see an example where the modal closes automatically when the counter hits 10.

So that's the plan! In the next episode, we'll get started by setting up our first modal, and as we go, we'll keep adding all these advanced features. Let's dive in!

Episode discussion

No comments, yet. Be the first!