Modal

The modal component is a versatile UI element commonly used to display information, notifications, or interactive content in a temporary overlay. It typically appears as a popup window positioned over the main content, providing a focused view while temporarily blocking interaction with the rest of the page.

+page.svelte

<script lang="ts">import { Button } from "@grampro/svelte-block";
import { Modal } from "@grampro/svelte-block";
let showModal = false;
</script>

<div>
	<Button
		on:click={() => {
			showModal = !showModal;
		}}>Show Modal</Button
	>

	<Modal bind:showModal autoclose modalTitle="Disclaimer">
		<p class="text-xs">
			The information provided on this website is for general informational purposes only. It is not
			intended to be a substitute for professional advice, diagnosis, or treatment. Always seek the
			advice of your physician or other qualified health provider with any questions you may have
			regarding a medical condition. Never disregard professional medical advice or delay in seeking
			it because of something you have read on this website.
		</p>
		<div>
			<Button class="mt-2">Accept</Button>
		</div>
	</Modal>
</div>
Copy

Sample

Props