svelte-inline-modal

npm-version npm-license npm-download-month npm-min-size ci.yml website

🪟 Simple Modal on the Fly

â–· Installation

It's Modal Menu

It's Nested Modal Menu

  1. First
  2. Second
  3. Third
<script>
  import { InlineModal } from 'svelte-inline-modal'
  
  const onCloseModal = () => {
    console.log('Modal Closed')
  }
</script>

<InlineModal onClose={onCloseModal}>
  {#snippet button(open)}
    <button onclick={open}>Open</button>
  {/snippet}
  {#snippet menu(close)}
  <div>
    <h2>It's Modal Menu</h2>
    <InlineModal onClose={onCloseModal}>
      {#snippet button(open)}
        <button onclick={open}>Nested Modal Open</button>
      {/snippet}
      {#snippet menu(close)}
        <div>
          <h2>It's Nested Modal Menu</h2>
          <ol>
            <li>First</li>
            <li>Second</li>
            <li>Third</li>
          </ol>
          <button onclick={close}>Close Nested Modal</button>
        </div>
      {/snippet}
    </InlineModal>
    <input placeholder="Input Form" />
    <button on:click={close}>Close</button>
  </div>
  {/snippet}
</InlineModal>