Skip to content
Svelte Modals

Transitions

Transitions can be added to your modals just like any other Svelte component. However they must be global transitions because they are mounted and unmounted by the Modals component.

MyModal.svelte
<script>
  import { fade } from 'svelte/transition'


  const { isOpen, close, title, message } = $props()
</script>


{#if isOpen}
  <div
    role="dialog"
    class="modal-container"
    transition:fade|global
  >
    <div class="modal-content">
      <h2>{title}</h2>
      <p>{message}</p>


      <div class="modal-actions">
        <button onclick={() => close()}>OK</button>
      </div>
    </div>
  </div>
{/if}

Exit before enter

By default, modals will open the next modal before the previous one has finished transitioning. Depending on your transition this might be ok, but often it’s cleaner to play one at a time.

To opt-in to this behaviour, you can use the exitBeforeEnter action. Use this on the root element of your modal that has the transitions.

MyModal.svelte
<script>
  import { fade } from 'svelte/transition'
  import { exitBeforeEnter } from 'svelte-modals'


  const { isOpen } = $props()
</script>


{#if isOpen}
  <div
    role="dialog"
    use:exitBeforeEnter
    transition:fade|global
  >
    <!-- ... -->
  </div>
{/if}