svelte-inline-modal

🪟 Simple Modal on the Fly

Demo

StackBlitz

Installation

1npm i svelte-inline-modal

Usage

Unlike most modal libraries that provide a common component at the root, this library deploys the modal in place using the dialog element.

1<script>
2  import { InlineModal } from 'svelte-inline-modal'
3
4  const onCloseModal = () => {
5    // ...
6  }
7</script>
8
9<InlineModal onClose={onCloseModal}>
10  {#snippet button(open)}
11    <button onclick={open}>Open</button>
12  {/snippet}
13  {#snippet menu(close)}
14    <div>
15      <!-- Your Modal Contents -->
16      <button onclick={close}>Close</button>
17    </div>
18  {/snippet}
19</InlineModal>

License

MIT