Dialog

Native <dialog class="dialog">. Open with showModal(), close with close() or Escape. The backdrop is ::backdrop. There is no wrapper. bind:this plus those two methods is the whole script.

Preview

Code

<button class="button" type="button" onclick={() => dialog.showModal()}>Open</button>

<dialog class="dialog" bind:this={dialog} aria-labelledby="dialog-title">
	<div class="dialog-header">
		<div class="dialog-title" id="dialog-title">Edit profile</div>
		<p class="dialog-description">Make changes to your profile here.</p>
	</div>
	<div class="dialog-footer">
		<button class="button button-outline" type="button" onclick={() => dialog.close()}>Cancel</button>
		<button class="button" type="button" onclick={() => dialog.close()}>Save</button>
	</div>
</dialog>