API Reference

<Modals />

Handles the rendering of your modals in the stack

Snippets

backdrop

Renders when any modals are open. The slot is empty by default.

<script>
  import { Modals, closeModal } from 'svelte-modals'
</script>

<Modals>
  {#snippet backdrop()}
    <div
      class="backdrop"
      onclick={closeModal}
    />
  {/snippet}
</Modals>


<style>
  .backdrop {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
}
</style>

loading

Rendered when the current modal is being lazy loaded (see Lazy Loading).

<script>
  import { Modals } from 'svelte-modals'
  import Spinner from '../Spinner.svelte'
</script>

<Modals>
  {#snippet loading()}
    <Spinner />
  {/snippet}
</Modals>

<style>
  .backdrop {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
}
</style>

modals

Renders the current stack of modals. If you wish to modify the behaviour of how the stack is rendered, you can override this snippet.

<script>
  import { Modals } from 'svelte-modals'
</script>

<Modals>
  <!-- always show all modals in the stack -->
  {#snippet modals(modals)}
    {#each modals as modal}
      <modal.component isOpen {...modal.props || {}} />
    {/each}
  {/snippet}
</Modals>

openModal

Opens a new modal

import { openModal } from 'svelte-modals'

openModal(component, props, options)

Param	Type	Required	Description
component	Component	Yes	Your Svelte modal component
props	any	No	Props for the modal
options	object	No
options.replace	boolean	No	This modal will replace the last modal in the stack

closeModal

Closes the last modal in the stack

import { closeModal } from 'svelte-modals'

closeModal()

closeModals

Closes the provided amount of modals

import { closeModals } from 'svelte-modals'

closeModals(2)

Param	Type	Required	Description
amount	number	Yes	The number of modals to close

closeAllModals

Closes all modals in the stack

import { closeAllModals } from 'svelte-modals'

closeAllModals()

onBeforeClose

Allows a Modal to prevent itself from being closed

<script>
import { onBeforeClose } from 'svelte-modals'

let dirty = $state(false)

onBeforeClose(() => {
  if (dirty) {
    alert('You have unsaved changes!')

    // prevents modal from closing
    return false
  }
})
</script>

<FancyForm bind:dirty />

$modals

A Svelte store containing the current stack of modal components and their props

$action

A Svelte store describing how the current modal came to be active (“push” or “pop”). This can be useful for transitions if they should animate differently based on the action.