__layout.svelte
<script>
import ModalList from "@mavthedev/svodals";
import AModal from "$lib/AModal.svelte"
const modals = [
{
id: 'data',
component: AModal
}
]
</script>
<ModalList modals={modals}>
<slot />
</ModalList>
$lib/AModal
<script>
export let data;
export let close;
</script>
{data.info}
<button on:click={() => close(true)}>
OK
</button>
<buttton on:click={() => close(false)}>
No
</button>
index.svelte (or any other route)
<script>
import { getModalContext } from "@mavthdev/svodals";
const modalAPI = getModalContext()
function create() {
modalAPI.addModal("data", console.log, {
info: "Save Data?"
})
}
</script>
<button on:click={create}>
Create Modal
</button>
Edit page on GitHub