Something went wrong. Try again.
svelte astro
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657<script lang="ts"> import type { Snippet } from "svelte"; import Block from "./Block.svelte";
let { toggle = $bindable(), children, }: { toggle: boolean; children: Snippet } = $props();
function close() { toggle = false; }
function onKeydown(e: KeyboardEvent) { if (toggle && e.key === "Escape") close(); }</script>
<!-- Esc to close FullScreen Block --><svelte:window onkeydown={onKeydown} />
{#if toggle} <button onclick={close}> <!-- svelte-ignore a11y_click_events_have_key_events --> <!-- svelte-ignore a11y_no_static_element_interactions --> <div onclick={(e) => e.stopPropagation()}> <Block color="var(--violet)"> {@render children()} </Block> </div> </button>{/if}
<style> button { position: fixed; inset: 0; border: none; width: 100vw; height: 100vh; background-color: rgba(255, 255, 255, 0.5); backdrop-filter: blur(1px); display: flex; align-items: center; justify-content: center; z-index: 999; }
div { position: relative; max-width: 90vw; max-height: 90vh; overflow: auto; cursor: default; }</style>