Modals

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.

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.