You can secure the closing of a modal by requesting confirmation from your user. All you need to do is set the enableCloseDialog property.

Customise content

closeDialogContent Enables you to customise text content inside close dialog.

{ content?: string; backButton?: string; confirmButton?: string };

Control appearance

closeDialog Snippet.

If you need to customise closeDialog appareance, just set your own closeDialog Snippet. Snippet takes an object as parameter with a function close that enables you to confirm the choice to close the modal. And a function back that just close the closeDialog.

Snippet<[{ close: () => unknown; back: () => unknown }]>;

For instance :

<button >
	My modal
	<Modal enableCloseDialog>
		Hey
		{#snippet closeDialog(func)}
            <div>Are you sure ????</div>
            <button onclick={func.close}>Yes !!!</button>
            <button onclick={func.back}>No....</button>
		{/snippet}
	</Modal>
</button>

Stackable

You can stack as much protected modals as you need. When clicking outside all of them, you will be asked to confirm the closing of the deepest modal.