Svelte Modal

Modal for Typescript Svelte Application

🙏 Description

Simple modal component for svelte(kit) applications that includes a showModal function, hideModal function & onHideModal callback

💎 Prerequisites

Requires @sensethenlove/global-style or add this css to your site

@keyframes fade-in-from-above {
  0% {
    opacity: 0;
    transform: translateY(-9rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-out-and-slide-up {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-9rem);
  }
}

html { /* Helps w/ rem, can still look good w/o just set rem/px as desired: https://stackoverflow.com/questions/59920538  */
  font-size: 62.5%;
}

☯️ Install

pnpm add @sensethenlove/svelte-modal
pnpm add @sensethenlove/global-style # Only necessary if prerequisite css above is not present

🧡 Add preferred styles

.stl--modal {
  z-index: 60;
  color: #273142;
  background-color: #fefefe;
  font-family: Inter, ui-sans-serif, system-ui;

  &--container {
    z-index: 30;
    background-color: rgba(black, 0.693);
  }

  &__header {

    &__text {
      color:#2196F3;
      font-family: papyrus;
      line-height: 1.8;
      font-weight: 600;
      font-size: 2.4rem;
    }

    &__close {

      svg {
        color: green;
        &:hover {
          color: #eac603;
        }
      }
    }
  }
}

💙 Example

<script lang="ts">
  import './modal.scss' // preferred styling (above)
  import '@sensethenlove/global-style/lib/index.css' // only necessary if prerequisite css above is not present
  import { Modal, type ShowModal, type HideModal, type OnModalHide } from '@sensethenlove/svelte-modal'

  let showModal: ShowModal
  let hideModal: HideModal

  const onHideModal = (() => {
    console.log('bye modal')
  }) satisfies OnModalHide

  function bind (e: CustomEvent) {
    showModal = e.detail.showModal
    hideModal = e.detail.hideModal
  }
</script>


<button on:click={ showModal }>Show Modal</button>

<Modal header="Header" on:functions={ bind } { onHideModal }>
  <div>Lorem ipsum</div>
  <button on:click={ hideModal }>Hide Modal</button>
</Modal>

💖 Our helpful packages!

Top categories