svelte-inline-modal

🪟 Simple Modal on the Fly

Demo

StackBlitz

Installation

npm 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.

<script>
  import { InlineModal } from 'svelte-inline-modal'

  const onCloseModal = () => {
    // ...
  }
</script>

<InlineModal onClose={onCloseModal}>
  {#snippet button(open)}
    <button onclick={open}>Open</button>
  {/snippet}
  {#snippet menu(close)}
    <div>
      <!-- Your Modal Contents -->
      <button onclick={close}>Close</button>
    </div>
  {/snippet}
</InlineModal>

License

MIT