Courses

Practical Alpine.js From Scratch

Show/Hide Modals: Buttons, Escape Key, Clicking Outside

Lesson 05/19 · 3:28 min

Autoplay

Link to repository

Previous: Multi-Step Form: Dynamic CSS Classes with :class

Marek Zofota

2 years ago

How can I pass value about ID for deleting ? This video only show and hide modal.

Povilas Korop

2 years ago

Sorry, I don't have a ready-made example for passing parameters to modals. Maybe last section of the course about "passing data" will give you some ideas.

Practical Alpine.js From Scratch

Show/Hide Modals: Buttons, Escape Key, Clicking Outside

What's Inside The Course

First Practical Example: Alpine.js vs jQuery vs Vanilla JS

Show/Hide Password: x-bind, x-text and Methods in x-data

Multi-Step Form: Dynamic CSS Classes with :class

Show/Hide Modals: Buttons, Escape Key, Clicking Outside

Slow Connection and x-cloak

Form with Progress Bar: x-model, x-ref, and More x-bind Examples

Multiple Alpine Components on Page: Events and Parameters

Countdown Timer: x-init with Vanilla JavaScript Syntax

Visual Effects of Show/Hide with x-transition

Live Character Count: Template Literals with Expressions

Live-Search: x-for with index

Color Picker: Mini-Recap of What We've Learned So Far

Several Ways to Install/Initialize Alpine

Load Larger JS Methods Externally: For Alpine or x-data

Alpine Inside Blade Components

"Hardcoding" Data in Blade from Controller

Getting Alpine Data from External/Internal API

Livewire + Alpine: Data in Both Directions