43 lines
1.8 KiB
PHP
43 lines
1.8 KiB
PHP
<div
|
|
x-data="{ 'showModal': false }"
|
|
@keydown.escape="showModal = false"
|
|
>
|
|
<!-- Trigger for Modal -->
|
|
<button type="button" @click="showModal = true">
|
|
{{-- circled ? modal --}}
|
|
<svg class="w-6 h-6 text-gray-800" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.529 9.988a2.502 2.502 0 1 1 5 .191A2.441 2.441 0 0 1 12 12.582V14m-.01 3.008H12M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
|
|
</svg>
|
|
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div
|
|
class="fixed inset-0 z-30 flex items-center justify-center overflow-auto bg-black bg-opacity-50"
|
|
x-show="showModal" x-cloak
|
|
>
|
|
<!-- Modal inner -->
|
|
<div
|
|
class="max-w-3xl px-6 py-4 mx-auto text-left bg-white rounded shadow-lg"
|
|
@click.away="showModal = false"
|
|
x-transition:enter="motion-safe:ease-out duration-300"
|
|
x-transition:enter-start="opacity-0 scale-90"
|
|
x-transition:enter-end="opacity-100 scale-100"
|
|
>
|
|
<!-- Title / Close-->
|
|
<div class="flex items-center justify-between border-b mb-2">
|
|
<h5 class="mr-3 text-black max-w-none">{{ $title ?? '' }}</h5>
|
|
|
|
<button type="button" class="z-50 cursor-pointer" @click="showModal = false">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- content -->
|
|
<div>{{ $slot }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|