Modals

Prerequisites

Initialize Stores

Implement the following in the root layout of your application. This is required only once when implementing Skeleton's Drawer, Modal, and Toast stores and will prevent known issues with SvelteKit SSR.

import { initializeStores } from '@skeletonlabs/skeleton';

initializeStores();

Modal Component

Implement a single instance of the modal component in your app's root layout, above the App Shell (if present).

<Modal />

<!-- <AppShell>...</AppShell> -->

Modal Store

When you wish to trigger a modal, import the getModalStore function and invoke it to retrieve the modalStore, which is a Svelte store that acts as the modal queue.

NOTE: To retrieve the store, getModalStore must be invoked at the top level of your component!

import { getModalStore } from '@skeletonlabs/skeleton';
			
const modalStore = getModalStore();

Trigger

The title, body, and image are available to all modals.

Close

Trigger the close() method to remove the first modal in the modal queue.

modalStore.close();

Clear

Trigger the clear() method to completely empty the modal queue.

modalStore.clear();

Modal Settings

These additional settings are available to all modals.

const modal: ModalSettings = {

	// Provide arbitrary classes to the backdrop and modal elements:
	backdropClasses: '!bg-green-500',
	modalClasses: '!bg-red-500',

	// Provide arbitrary metadata to your modal instance:
	meta: { foo: 'bar', fizz: 'buzz', fn: myCustomFunction }

};

Async Response

You may await a modal response by wrapping it in a Javascript Promise, which resolves when the response is triggered.

new Promise<boolean>((resolve) => {
	const modal: ModalSettings = {
		type: 'confirm',
		title: 'Please Confirm',
		body: 'Are you sure you wish to proceed?',
		response: (r: boolean) => {
			resolve(r);
		}
	};
	modalStore.trigger(modal);
}).then((r: any) => {
	console.log('resolved response:', r);
});

To create custom modals, generate a new component, then pass this to the Modal system.

See the additional information below to learn how to use custom component modals.

Accessibility

Skeleton does not provide a means to disable the backdrop's click to close feature, as this would be harmful to accessibility. View the ARIA APG guidelines to learn more about modal accessibility.