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} let:open>
  <button on:click={open}>Open</button>
  <div slot="menu" let:close>
    <!-- Your Modal Contents -->
    <button on:click={close}>Close</button>
  </div>
</InlineModal>

License

MIT