This is a simple resuable modal component. It comes standard with a close button and backdrop. You can also click outside the modal to close it.

The component is made using the DaisyUI modal component:


<script lang="ts">
    import Modal from '$lib/ui/components/Modal.svelte';
	let dialog: HTMLDialogElement;

<button type="button" on:click={() => dialog.showModal()}>Open modal</button>

<Modal bind:dialog={dialog}>.
    <!-- Modal content -->
    <p>This is a modal.</p>

Located at src/lib/ui/components/Modal.svelte.

You can customize it to your needs.