laravel_alpine_tailwindcss_modal.php

@props(['title' => false, 'width' => 'sm:max-w-lg'])

<div x-data="{ open:false }">
    <div @click="open = true">
        {{ $trigger }}
    </div>

    <div
        x-cloak
        x-show="open"
        class="fixed inset-0 z-10 overflow-y-auto">
        <div class="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
            <div
                x-show="open"
                x-transition:enter="ease-out duration-100"
                x-transition:enter-start="opacity-0"
                x-transition:enter-end="opacity-100"
                x-transition:leave="ease-in duration-200"
                x-transition:leave-start="opacity-100"
                x-transition:leave-end="opacity-0"
                class="fixed inset-0 transition-opacity" aria-hidden="true">
                <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
            </div>

            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>

            <div
                x-show="open"
                x-transition:enter="ease-out duration-300"
                x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
                x-transition:leave="ease-in duration-200"
                x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
                x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                class="inline-block px-4 pt-5 pb-4 overflow-hidden text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:align-middle {{ $width }} w-full sm:p-6"
                role="dialog" aria-modal="true" aria-labelledby="modal-headline">

                <div>
                    @if ($title)
                        <h3 class="text-lg font-medium leading-6 text-gray-900 truncate whitespace-nowrap sm:pr-4" title="{{ $title }}">
                            {{ $title }}
                        </h3>
                    @endif

                    <div class="absolute top-0 right-0 pt-4 pr-4">
                        <button type="button" @click="open = false" class="text-gray-400 bg-white rounded-md hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-200">
                            <span class="sr-only">Close</span>

                            <x-feathericon-x class="w-5 h-5" />
                        </button>
                    </div>
                </div>

                {{ $slot }}
            </div>
        </div>
    </div>
</div>