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.
Overview
Syllabus
- The HTML and CSS for a Basic Modal
- Make it a Blade + Alpine Component
- Technique #1: A URI Hash Toggles the Modal
- Use Alpine to Intercept a Form's Submission
- Technique #2: Manage Modal State With Livewire
- Livewire And Alpine Synchronization
- Basic Alpine Transitions
- A Full Example
- Toggle Alpine Modals Using Events
Taught by
Jeffrey Way
