24 lines
664 B
Svelte
24 lines
664 B
Svelte
<script lang="ts">
|
|
export let hidden: boolean = true;
|
|
export let closeable: boolean = true;
|
|
import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
|
|
|
|
$: if (globalThis.window) {
|
|
if (hidden) {
|
|
enableBodyScroll(document.body);
|
|
} else {
|
|
disableBodyScroll(document.body);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div class="fixed top-0 left-0 w-[100vw] h-[100vh] flex items-center justify-center bg-[rgba(0,0,0,0.8)] z-50" class:hidden={hidden} on:click|self={() => {
|
|
hidden = closeable ? true : hidden;
|
|
}}>
|
|
{#if closeable}
|
|
<button class="absolute top-4 left-4 text-white" on:click={() => {
|
|
hidden = true;
|
|
}}>Schließen</button>
|
|
{/if}
|
|
<slot></slot>
|
|
</div> |