- php artisan make:component Modal
Created
January 15, 2025 12:42
-
-
Save mi-dexigner/a08ea1c092439c9010e8aefa32dde3f4 to your computer and use it in GitHub Desktop.
Create a Modal using Laravel Livewire with Alpine JS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @props(['name','title']) | |
| <div | |
| x-data="{ show : false,name:'{{ $name }}' }" | |
| x-show="show" | |
| {{-- x-on:open-modal.window="show=true" --}} | |
| x-on:open-modal.window="show = ($event.detail.name === name)" | |
| x-on:close-modal.window="show=false" | |
| x-on:keydown.escape.window="show=false" | |
| class="fixed z-50 inset-0" | |
| style="display: none" | |
| x-transition.duration.500ms | |
| > | |
| <div x-on:click="show=false" class="fixed inset-0 bg-gray-300 opacity-40"></div> | |
| <div class="bg-white rounded m-auto fixed inset-0 max-w-2xl max-h-[500px]"> | |
| <div><button | |
| x-on:click="$dispatch('close-modal')" | |
| class="px-3 py-1 bg-teal-500 text-white rounded">X</button> | |
| @if (isset($title)) | |
| <div class="py-3 flex items-center justify-center">{{ $title }}</div> | |
| @endif | |
| </div> | |
| <div> | |
| {{ $body }} | |
| </div> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="w-2/4 mx-auto pt-10"> | |
| <button x-data | |
| x-on:click="$dispatch('open-modal',{name:'test'})" | |
| class="px-3 py-1 bg-teal-500 text-white rounded">Open Modal</button> | |
| <x-modal name="test" title="Hello"> | |
| <x-slot:body> | |
| Do what you can, with what you have, where you are. - Theodore Roosevelt | |
| </x-slot:body> | |
| </x-modal> | |
| <button x-data | |
| x-on:click="$dispatch('open-modal',{name:'test2'})" | |
| class="px-3 py-1 bg-indigo-500 text-white rounded">Open Modal2</button> | |
| <x-modal name="test2" title="Hello 22222"> | |
| <x-slot:body> | |
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis reiciendis earum sint modi, eveniet expedita ipsum voluptas perferendis quam obcaecati tenetur pariatur dolorum commodi quis nesciunt aut ullam quisquam impedit! | |
| <br /> | |
| Do what you can, with what you have, where you are. - Theodore Roosevelt | |
| </x-slot:body> | |
| </x-modal> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment