Svelte-Pops

svelte-pops

NPM Github

Introduction

Overview Configuration 'modal-open:' Variant How anchor works Modal : init action Tooltip : init action

Modal Props

Reference Content & Styles Interactivity Placement Tooltip in Modals Close Dialog Shallow Routing Stop scroll

Tooltip

Props

Typescript

Modal Types Tooltip Types

Introduction

Modal : init action

initModal action is a good way to create a flexible modal.

It has noDefaultAnchor by default
It makes your anchor works without extra element binding

Be sure to pass the children Snippet prop. Which, by the way, can have a parameter that represent the ModalRemote.

Basic use

svelte

<script lang="ts">
	import { initModal } from 'svelte-pops';
</script>

<button use:initModal={{ children: modalContent,  }}
	>My button</button
>

{#snippet modalContent(modal: ModalRemote)}
	My modal
{/snippet}

Modal children snippet

Having the ModalRemote as parameter of the children snippet make it easy to create a button inside of your modal that controls it, for instance :

svelte

{#snippet modalWithButton(modal: ModalRemote)}
	<div>
		<button onclick={() => modal.close()}>Close modal</button>
	</div>
{/snippet}

Works well with tooltip

And tooltip props remains reactive, try it !

disabled

onMouse

hideMS

svelte

{#snippet content(modal?: ModalRemote)}
	{#if modal}
		In Modal context
	{:else}
		In Tooltip context
	{/if}
{/snippet}

<button use:initModal={{ children: content, tooltip: content, tooltipProps }}
	>My button</button
>