Alpine Modals Using Events example

example.html

<x-layout>
    <x-button class="bg-gray-400 hover:bg-gray-500" onclick="$modals.show('join-modal')">Join</x-button>

    <x-modals.join />

    <script>
        window.$modals = {
            show(name) {
                window.dispatchEvent(
                    new CustomEvent('modal', { detail: name })
                );
            }
        }
    </script>
</x-layout>

join.blade.php

<x-modal name="join-modal">
    <x-slot name="title">
        <h1 class="text-lg font-bold">Join</h1>
    </x-slot>

    <x-slot name="body">
        <p>Here are some details about our plans.</p>
    </x-slot>

    <x-slot name="footer">
        <x-button class="bg-blue-500 hover:bg-blue-600" @click="show = false">Close</x-button>
    </x-slot>
</x-modal>

modal.blade.php

@props(['name'])

<div x-data="{ show: false, name: '{{ $name }}' }"
     x-show="show"
     x-on:modal.window="
        show = ($event.detail === name);
     "
     @keydown.escape.window="show = false"
     :id="name"
     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%"
         x-show.transition="show"
    >
        <div class="flex flex-col h-full justify-between">
            <header class="p-6">
                <h3 class="font-bold text-lg">
                    {{ $title }}
                </h3>
            </header>

            <main class="px-6 mb-4">
                {{ $body }}
            </main>

            <footer class="flex justify-end px-6 py-4 mt-6 bg-gray-200 rounded-b-md">
                {{ $footer }}
            </footer>
        </div>
    </div>
</div>