https://github.com/mattjennings/svelte-modals
A simple, flexible, zero-dependency modal stack manager for Svelte.
https://github.com/mattjennings/svelte-modals
Last synced: 30 days ago
JSON representation
A simple, flexible, zero-dependency modal stack manager for Svelte.
- Host: GitHub
- URL: https://github.com/mattjennings/svelte-modals
- Owner: mattjennings
- Created: 2021-06-11T20:58:35.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2025-03-09T19:05:09.000Z (3 months ago)
- Last Synced: 2025-05-08T15:44:00.051Z (about 1 month ago)
- Language: TypeScript
- Homepage: https://svelte-modals.mattjennings.io
- Size: 472 KB
- Stars: 157
- Watchers: 3
- Forks: 10
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# svelte-modals
A simple, flexible, zero-dependency modal manager for Svelte.
[View documentation](https://svelte-modals.mattjennin.gs)
## Getting Started
### Installation
```bash
npm install svelte-modals
```
### Add \ to your app
All opened modals will be rendered inside ``. If you're using SvelteKit, `+layout.svelte` would be appropriate
place to put it. Otherwise, wherever you want the modals to be rendered.
```svelte
import { Modals } from 'svelte-modals'
{#snippet backdrop({ close })}
close()} />
{/snippet}
.backdrop {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
}
```
### Create your Modal component
Let's create a basic modal component:
```svelte
const {
// provided by <Modals />
isOpen,
close,
// your props
title,
message
} = $props()
{#if isOpen}
{title}
{message}
close()}>OK
{/if}
.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;
}
```
### Try it out
Import `modals` anywhere in your app to open or close your modals
```svelte
import { modals } from 'svelte-modals'
import MyModal from '$lib/components/MyModal.svelte'
function handleClick() {
modals.open(MyModal, { title: 'Alert', message: 'This is an alert' })
}
Open Modal
```