Dialog #

A modal that overlays the entire page. Uses Teleport to allow usage from any component without inheriting styles.

<button onclick={() => (opened = true)}>
	open a dialog
</button>
{#if opened}
	<Dialog onclose={() => (opened = false)}>
		{#snippet children(close)}
			<div class="pane p_xl box">
				<h1>attention</h1>
				<p>this is a dialog</p>
				<button onclick={close}>ok</button>
			</div>
		{/snippet}
	</Dialog>
{/if}