Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Alpine Modals Using Events example
<x-button class="bg-gray-400 hover:bg-gray-500" onclick="$'join-modal')">Join</x-button>
<x-modals.join />
window.$modals = {
show(name) {
new CustomEvent('modal', { detail: name })
<x-modal name="join-modal">
<x-slot name="title">
<h1 class="text-lg font-bold">Join</h1>
<x-slot name="body">
<p>Here are some details about our plans.</p>
<x-slot name="footer">
<x-button class="bg-blue-500 hover:bg-blue-600" @click="show = false">Close</x-button>
<div x-data="{ show: false, name: '{{ $name }}' }"
show = ($event.detail === name);
@keydown.escape.window="show = false"
style="display: none"
class="fixed inset-0 grid place-items-center"
{{ $attributes }}
<div class="fixed inset-0 bg-gray-900 opacity-90" @click="show = false"></div>
<div class="bg-white shadow-md max-w-sm m-auto rounded-md overflow-y-auto relative z-10"
style="max-height: 80%"
<div class="flex flex-col h-full justify-between">
<header class="p-6">
<h3 class="font-bold text-lg">
{{ $title }}
<main class="px-6 mb-4">
{{ $body }}
<footer class="flex justify-end px-6 py-4 mt-6 bg-gray-200 rounded-b-md">
{{ $footer }}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment