39 lines
1.5 KiB
PHP
39 lines
1.5 KiB
PHP
<div
|
|
x-data="{ 'showModal': false }"
|
|
@keydown.escape="showModal = false"
|
|
>
|
|
<!-- Trigger for Modal -->
|
|
<button type="button" @click="showModal = true">
|
|
{{ $button_text }}
|
|
</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 {{ $title->attributes->merge(['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>
|