45 lines
1.4 KiB
Svelte
45 lines
1.4 KiB
Svelte
<script>
|
|
import { createEventDispatcher, onMount, onDestroy } from 'svelte';
|
|
|
|
export let open = false;
|
|
export let title = '';
|
|
|
|
const dispatch = createEventDispatcher();
|
|
|
|
function close() {
|
|
dispatch('close');
|
|
}
|
|
|
|
function handleKeydown(e) {
|
|
if (e.key === 'Escape' && open) {
|
|
close();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<svelte:window on:keydown={handleKeydown}/>
|
|
|
|
{#if open}
|
|
<div class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
|
|
<div class="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
|
|
|
|
<div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75" aria-hidden="true" on:click={close}></div>
|
|
|
|
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>
|
|
|
|
<div 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 sm:max-w-lg sm:w-full sm:p-6">
|
|
<div class="sm:flex sm:items-start">
|
|
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
|
|
{title}
|
|
</h3>
|
|
<div class="mt-2 text-sm text-gray-500">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|