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="box">
				<div class="pane p_xl box">
					<h1>attention</h1>
					<p>this is a dialog</p>
					<button onclick={close}>ok</button>
				</div>
			</div>
		{/snippet}
	</Dialog>
{/if}