76 lines
2.7 KiB
PHP
Executable File
76 lines
2.7 KiB
PHP
Executable File
@php
|
|
$id = $id ?? 'modal_id';
|
|
$title = $title ?? 'Modal miss title';
|
|
$footerOK = $footerOK ?? 'OK';
|
|
@endphp
|
|
<!-- Main modal -->
|
|
<div id="{{ $id }}" class="modal">
|
|
{{-- middle on screen --}}
|
|
<div class="flex justify-center items-center p-4 h-full">
|
|
<!-- Modal content -->
|
|
<div class="bg-white rounded-lg shadow w-full">
|
|
<!-- Modal header -->
|
|
<div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t">
|
|
<h3 class="text-xl font-semibold text-gray-900">
|
|
{{ $title }}
|
|
</h3>
|
|
<button type="button"
|
|
class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center"
|
|
onclick="$MODAL_HIDE('{{ $id }}')">
|
|
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
|
|
viewBox="0 0 14 14">
|
|
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
|
|
</svg>
|
|
<span class="sr-only">Close modal</span>
|
|
</button>
|
|
</div>
|
|
<!-- Modal body -->
|
|
<div class="h-[65vh] overflow-y-auto">
|
|
{{ $slot }}
|
|
</div>
|
|
<!-- Modal footer -->
|
|
<div class="flex items-center p-4 md:p-5 border-t border-gray-200 rounded-b">
|
|
<button onclick="$MODAL_HIDE('{{ $id }}')" type="button"
|
|
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center">{{ $footerOK }}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@push('style')
|
|
<style>
|
|
body.{{ $id }} {
|
|
overflow: hidden;
|
|
}
|
|
|
|
body.{{ $id }} #{{ $id }} {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transition: visibility 0s linear 0s, opacity 0.5s ease-in-out;
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@push('script')
|
|
<script>
|
|
window.$MODAL_SHOW = function(id) {
|
|
if (!$('body').hasClass(id)) {
|
|
$('body').addClass(id)
|
|
}
|
|
}
|
|
|
|
window.$MODAL_HIDE = function(id) {
|
|
if ($('body').hasClass(id)) {
|
|
$('body').removeClass(id)
|
|
}
|
|
}
|
|
|
|
document.addEventListener('keydown', (event) => {
|
|
if (event.key === 'Escape') {
|
|
$MODAL_HIDE('{{ $id }}')
|
|
}
|
|
})
|
|
</script>
|
|
@endpush
|