Custom Modal Stack

It is possible to customize the modal stack and how modals are rendered. For example, you may wish to display opened modals all the time. This can be achieved by overriding the modal snippet in the ModalStack component.

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

<ModalStack>
  {#snippet backdrop({ close })}
    <div class="backdrop" onclick={() => close()}></div>
  {/snippet}

  {#snippet modal(modal)}
    <modal.component
      {...modal.props}
      isActive={modals.stack.length > 0}
    />
  {/snippet}
</ModalStack>

Open

Notice how clicking “close” on a modal in the background will close that modal rather than the one on the top. This is because these modal components use the close() prop, which will dismiss that modal specifically.

You can also close a modal by using modals.closeById(id) and passing an id to the modal.

modals.open(ModalComponent, props, { id: 'some-id' })
modals.closeById('some-id')