svelte-simple-modal

Live demo: https://svelte.dev/repl/033e824fad0a4e34907666e7196caec4?version=3.20.1

Works with: Svelte >=v3.30 and v4!

Table of Contents

• Install
  • Rollup Setup
• Usage
  • TypeScript Example
  • Svelte Store Example
  • Styling
  • SSR
  • Accessibility
• API
  • Component
  • Events
  • Context API
  • Store API
• FAQ

Install

npm install --save svelte-simple-modal

Rollup Setup

Make sure that the main application's version of svelte is used for bundling by setting rollup-plugin-node-resolve's dedupe option as follows:

import resolve from 'rollup-plugin-node-resolve';

export default {
  plugins: [
    resolve({
      dedupe: ['svelte', 'svelte/transition', 'svelte/internal'], // important!
    }),
  ],
};

Usage

Import the Modal component into your main app component (e.g., App.svelte).

The modal is exposing two context functions:

• open() opens a component as a modal.
• close() simply closes the modal.

<content></content>





<p><button>Show me a surprise!</button></p>





<p>🎉 {message} 🍾</p>

Demo: https://svelte.dev/repl/52e0ade6d42546d8892faf8528c70d30

Usage with TypeScript

You can use the Context type exported by the package to validate the getContext function:

import type { Context } from 'svelte-simple-modal';
const { open } = getContext('simple-modal');
// ...

Usage With a Svelte Store

Alternatively, you can use a Svelte store to show/hide a component as a modal.

  <button>Show modal</button>

Demo: https://svelte.dev/repl/aec0c7d9f5084e7daa64f6d0c8ef0209

The `` component is the same as in the example above.

To hide the modal programmatically, simply unset the store. E.g., modal.set(null).

Styling

The modal comes pre-styled for convenience but you can easily extent or replace the styling using either custom CSS classes or explicit CSS styles.

Custom CSS classes can be applied via the classBg, classWindow, classWindowWrap, classContent, and classCloseButton properties. For instance, you could customize the styling with TailwindCSS as follows:

  <button>Show modal</button>

Demo: https://svelte.dev/repl/f2a988ddbd5644f18d7cd4a4a8277993

> Note: to take full control over the modal styles with CSS classes you have to reset existing styles via unstyled={true} as internal CSS classes are always applied last due to Svelte's class scoping.

Alternatively, you can also apply CSS styles directly via the styleBg, styleWindow, styleWindowWrap, styleContent, and styleCloseButton properties. For instance:

  <button>Show modal</button>

Demo: https://svelte.dev/repl/50df1c694b3243c1bd524b27f86eec51

Server-Side Rendering

With SvelteKit you can enable SSR using the browser environmental variable as follows:

{#if browser}
  
    <content>
  </content>
{/if}

Alternatively, you can enable SSR by dynamically importing svelte-simple-modal in onMount() as follows:

import { onMount } from 'svelte';

onMount(async () => {
  const svelteSimpleModal = await import('svelte-simple-modal');
  Modal = svelteSimpleModal.default;
});

Accessibility

The library applies the following WAI-ARIA guidelines for modal dialogs automtically:

• aria-modal="true" and role="dialog" are applied automatically
• The tab focus is trapped in the modal
• The modal is closed on pressing the esc key

To further improve the accessibility you'll have to either provide a label via ariaLabel or reference a title element via ariaLabelledBy. The ariaLabel is automatically omitted when ariaLabelledBy is specified.

API

Component API

The `` component accepts the following optional properties:

Component Events

The `` component dispatches the following events:

• open: dispatched when the modal window starts to open.
• opened: dispatched when the modal window opened.
• close: dispatched when the modal window starts to close.
• closed: dispatched when the modal window closed.

Alternatively, you can listen to those events via callbacks passed to open() and close().

Context API

Svelte Simple Modal uses Svelte's context API to expose the open() and close() methods. You can get these methods as follows:

const { open, close } = getContext('simple-modal');

# open(Component, props = {}, options = {}, callbacks = {})

Opens the modal with `` rendered as the content. options can be used to adjust the modal behavior once for the modal that is about to be opened. The options allows to customize all parameters except key and setContext:

{
  closeButton: false,
  closeOnEsc: false,
  closeOnOuterClick: false,
  transitionBg: fade,
  transitionBgProps: {
    duration: 5000
  },
  transitionWindow: fly,
  transitionWindowProps: {
    y: 100,
    duration: 250
  },
  styleBg: { backgroundImage: 'https://example.com/my-background.jpg' },
  styleWindow: { fontSize: '20em' },
  styleContent: { color: 'yellow' },
  styleCloseButton: { width: '3rem', height: '3rem' },
  disableFocusTrap: true
}

# close(callbacks = {})

Closes the modal. Similar to open(), this method supports adding callbacks for the closing transition:

{
  onClose: () => { /* modal window starts to close */ },
  onClosed: () => { /* modal window closed */ },
}

Callbacks are triggered at the beginning and end of the opening and closing transition. The following callbacks are supported:

{
  onOpen: () => { /* modal window starts to open */ },
  onOpened: () => { /* modal window opened */ },
  onClose: () => { /* modal window starts to close */ },
  onClosed: () => { /* modal window closed */ },
}

Store API

You can also use Svelte stores to open a modal using the ``'s show property as follows:

  <button>Show modal</button>



<p>🎉 Hi 🍾</p>

Demo: https://svelte.dev/repl/6f55b643195646408e780ceeb779ac2a

An added benefit of using stores is that the component opening the modal does not have to be a parent of . For instance, in the example above, `App.svelte` is toggling `Popup.svelte` as a modal even though `App.svelte` is not a child of .

Bind Props to a Component Shown as a Modal

Sometimes you want to pass properties to the component shown as a modal. To accomplish this, you can use our bind() helper function as follows:

If you've worked with React/JSX then think of const c = bind(Component, props) as the equivalent of const c = .

FAQ

Custom Close Button

This feature requires Svelte >=v3.19!

Unfortunately, it's not possible to adjust all styles of the built-in close button via the styleCloseButton option. If you need full control you can implement your own Svelte component and use that as the close button. To do so pass your component via the closeButton option to `` or open().

For example, your close button might look as follows:

<button>Custom Close Button</button>

<style>
  /* Customize to your liking */
  button {
    position: absolute;
    top: -3rem;
    right: 0;
  }
</style>

Now you can set it as the default close button by passing it to `` as follows:

  <content>
</content>

Or you can pass CloseButton to open() as shown below:

<p><button>Show me a surprise!</button></p>

License

MIT