Skip to content

Getting Started

Installation

Terminal window
npm install svelte-modals

Add <Modals /> to your app

All opened modals will be rendered inside <Modals />. If you’re using SvelteKit, +layout.svelte would be appropriate place to put it. Otherwise, wherever you want the modals to be rendered.

App.svelte
<script>
import { Modals } from 'svelte-modals'
</script>
<Modals>
<!-- shown when any modal is opened -->
{#snippet backdrop({ close })}
<div
class="backdrop"
onclick={() => close()}
/>
{/snippet}
</Modals>
<style>
.backdrop {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: rgba(0,0,0,0.50)
}
</style>

Create your Modal component

Let’s create a basic modal component:

MyModal.svelte
<script>
const {
// provided by <Modals />
isOpen,
close,
// your props
title,
message
} = $props()
</script>
{#if isOpen}
<div role="dialog" class="modal">
<div class="contents">
<h2>{title}</h2>
<p>{message}</p>
<div class="actions">
<button onclick={() => close()}>OK</button>
</div>
</div>
</div>
{/if}
<style>
.modal {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
/* allow click-through to backdrop */
pointer-events: none;
}
.contents {
min-width: 240px;
padding: 16px;
background: white;
display: flex;
flex-direction: column;
justify-content: space-between;
pointer-events: auto;
}
h2 {
text-align: center;
font-size: 24px;
}
p {
text-align: center;
margin-top: 16px;
border-radius: 6px;
}
.actions {
margin-top: 32px;
display: flex;
justify-content: flex-end;
}
</style>

Try it out

Import modals anywhere in your app to open or close your modals

<script>
import { modals } from 'svelte-modals'
import MyModal from '$lib/components/MyModal.svelte'
function handleClick() {
modals.open(MyModal, { title: "Alert", message: "This is an alert" })
}
</script>
<button onclick={handleClick}>Open Modal</button>