Skip to content

A simple, flexible, zero-dependency modal stack manager for Svelte.

Notifications You must be signed in to change notification settings

edimedia/svelte-modals

This branch is 49 commits behind mattjennings/svelte-modals:main.

Folders and files

NameName
Last commit message
Last commit date
Aug 1, 2021
Jul 2, 2023
Jul 2, 2023
Jun 11, 2021
Jan 15, 2022
Jun 12, 2021
Jun 11, 2021
Jun 11, 2021
Jun 12, 2021
Jun 13, 2021
Aug 17, 2022
Jul 2, 2023
Jul 2, 2023
Jun 11, 2021
Aug 17, 2022
Apr 29, 2022
Jul 2, 2023
Aug 17, 2022

Repository files navigation

svelte-modals

A simple, flexible, zero-dependency modal manager for Svelte.

View documentation

Getting Started

npm install svelte-modals

Add Modals somewhere in your app. This is where the modals will render.

<script>
  import { Modals, closeModal } from 'svelte-modals'
</script>

<Modals>
  <div
    slot="backdrop"
    class="backdrop"
    on:click={closeModal}
  />
</Modals>

<style>
  .backdrop {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(0,0,0,0.50)
  }
</style>

Create your Modal component

<script>
  import { closeModal } from 'svelte-modals'

  // provided by Modals
  export let isOpen

  export let title
  export let message
</script>

{#if isOpen}
<div role="dialog" class="modal">
  <div class="contents">
    <h2>{title}</h2>
    <p>{message}</p>
    <div class="actions">
      <button on:click="{closeModal}">OK</button>
    </div>
  </div>
</div>
{/if}

<style>
  .modal {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    /* allow click-through to backdrop */
    pointer-events: none;
  }

  .contents {
    min-width: 240px;
    border-radius: 6px;
    padding: 16px;
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: auto;
  }

  h2 {
    text-align: center;
    font-size: 24px;
  }

  p {
    text-align: center;
    margin-top: 16px;
  }

  .actions {
    margin-top: 32px;
    display: flex;
    justify-content: flex-end;
  }
</style>

Open it

<script>
  import { openModal } from 'svelte-modals'
  import Modal from './Modal.svelte'

  function handleClick() {
    openModal(Modal, { title: 'Alert', message: 'This is an alert' })
  }
</script>

<button on:click="{handleClick}">Open Modal</button>

About

A simple, flexible, zero-dependency modal stack manager for Svelte.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Svelte 52.9%
  • JavaScript 18.6%
  • TypeScript 14.4%
  • CSS 12.5%
  • HTML 1.6%