Svelte Morphing Modal for Svelte 3 demo

Simple modal layout with morphing transition from trigger element to modal content.

Features

• Any modal contents - just a layout, you able to put anithing in it!
• Fullscreen mode (auto, always, mobile only)
• Overlay mode with click to close.
• Auto close on esc key.
• Lock scroll mode.
• Simple open/close (just a prop).

Install

npm i svelte-morphing-modal --save-dev

yarn add svelte-morphing-modal

CDN: UNPKG | jsDelivr (available as window.MorphingModal)

Usage

<MorphingModal {open}>
    <button>Open modal</button>
    <div slot="content">
        <p>Modal content</p>
    </div>
</MorphingModal>

<script>
    import MorphingModal from 'svelte-morphing-modal';

    let open
</script>

If you are not using using es6, instead of importing add

<script src="/path/to/svelte-morphing-modal/index.js"></script>

just before closing body tag.

License

MIT © PaulMaly