Back Button Techniques
Modals with the TALL Stack

Modals with the TALL Stack

For such a simple concept, modals can often be tricky to implement. Where exactly do we place them? Where should the event listeners to toggle their display be stored? And how to we make them dynamic? In this series, one piece at a time, we'll discuss everything you need to know about modals within the TALL (Tailwind, Alpine, Laravel, Livewire) stack.

Intermediate
9 episodes
1h 17m
9
Latest Episode in This Series

Added 2 days ago

Toggle Alpine Modals Using Events

If you need to toggle an Alpine modal from anywhere in your application, it might be...

Watch
Modals with the TALL Stack

Modals with the TALL Stack

Version: Laravel 8, Livewire 2, Alpine 2, Tailwind 2

For such a simple concept, modals can often be tricky to implement. Where exactly do we place them? Where should the event listeners to toggle their display be stored? And how to we make them dynamic? In this series, one piece at a time, we'll discuss everything you need to know about modals within the TALL (Tailwind, Alpine, Laravel, Livewire) stack.

Begin
9
Latest Episode in This Series

Added 2 days ago

Toggle Alpine Modals Using Events

If you need to toggle an Alpine modal from anywhere in your application, it might be useful...
Watch

Your Teacher | Jeffrey Way

https://laracasts.s3.amazonaws.com/avatars/jeffrey-avatar.jpg's avatar
Hi, I'm Jeffrey. I'm the creator of Laracasts and spend most of my days building the site and thinking of new ways to teach confusing concepts. I live in Orlando, Florida with my wife and two kids.
    1. Free Episode Run Time 10:34

      Let's get started by quickly writing both the HTML and CSS for a basic modal. It won't be perfect, but this should be enough to get us going. We'll use Tailwind to quickly apply the necessary classes.

    2. Free Episode Run Time 7:16

      Now that we have the beginnings of a modal, let's extract all of that HTML into a Blade component. Once complete, it only takes a few characters to add Alpine support.

    3. Before we review Livewire integration, let's first learn how to use the URI hash as a technique for toggling the display of any modal on your site.

    4. In this episode, we'll use Alpine to intercept the submission of a form, and then display a confirmation modal to the user.

    5. Let's review a different way to manage and toggle a modal's state: Livewire. Livewire is magic in the best possible way.

    6. In its current form, our modal is missing a number of expected features. For example, when I click outside of the modal card, it should close. If I press the escape key, it should also close. These are basic conveniences that any modal should provide. As we solve this problem, we'll have the opportunity to review Livewire's @entangle directive which will allow us to synchronize a property's value between Livewire And Alpine. If its value changes on one end, the other will update as well.

    7. Let's set aside five minutes to quickly improve the design and flow of our modal. In particular, we'll combine Alpine and Tailwind to quickly apply a nice-enough looking scale and fade transition to the modal card, itself.

    8. Run Time 13:32

      Let's finish up by making the modal a bit more dynamic. We'll start by pulling in a Tailwind UI table layout to simulate a typical user management page. We'll then add a "Delete" button that should trigger a confirmation modal with details for the associated user.

    9. If you need to toggle an Alpine modal from anywhere in your application, it might be useful to reach for an event-based approach. In this lesson, we'll add a $modals.show('modal-name') API for activating any registered modal. To allow for this, we'll dispatch an event on the window object, and then listen for it from our modal Blade component.