sv-popup

An easy to use popup/modal utility for svelte.

Installation

npm i -D sv-popup

Features

easy to use components.
click outside or escape to close modal.
uses portal.
pass classes and attributes to Modal, Content, & Trigger.
less than 1KB (minified+gzipped)

Props

Prop	Default	Feature
`basic`	`false`	Adds white background to the Modal
`small`	`false`	Pops small modal
`big`	`false`	Pops big modal
`fullscreen`	`false`	Pops fullscreen modal
`button`	`true`	Shows close button
`close`	`false`	Set to true to close the modal

Limitations

though you can have multiple triggers on a page, only one modal can be opened at a time.
close closes all modals.

Use it in paragraphs

A word in a paragraph can be a modal trigger

Click on the word modal to pop it.

A word in a paragraph can be a  <Modal basic><Content><h2>Hello</h2></Content><Trigger>modal</Trigger></Modal>

Unstyled by default

<Modal>
  <Content>
    <h2>Hello</h2>
  </Content>
  <Trigger>
    <button class="btn">Open a simple unstyled modal</button>
  </Trigger>
</Modal>

This modal will not have any background. You can define any background through CSS.

Basic

<Modal basic>
  <Content>
    <h2>Hello</h2>
  </Content>
  <Trigger>
    <button class="btn">Open modal default (basic prop)</button>
  </Trigger>
</Modal>

Close modal programmatically

<script>
  let closeModal = false;
  //set this to true by an event
</script>

<Modal basic close={closeModal}>
  <Content>
    <h2>Hello</h2>
  </Content>
  <Trigger>
    <button class="btn">Open modal default + external tigger to close</button>
  </Trigger>
</Modal>

Small

<Modal basic small={true}>
  <Content>
    <h2>Hello world</h2>
  </Content>
  <Trigger>
    <button class="btn">Open modal small</button>
  </Trigger>
</Modal>

Add classes to style

<Modal basic>
  <Content class="p-4">
    <h2>Hello world</h2>
  </Content>
  <Trigger>
    <button class="btn">Open modal with class p-4 (tailwind, bootstrap, or class based framework) on Content</button>
  </Trigger>
</Modal>

Use custom background

<Modal>
  <Content class="bg-indigo-400 p-4">
    <h2>Hello</h2>
  </Content>
  <Trigger>
    <button class="btn">Open modal with custom background</button>
  </Trigger>
</Modal>

Big

<Modal basic big={true}>
  <Content>
    <h2>Hello world</h2>
  </Content>
  <Trigger>
    <button class="btn">Open modal big</button>
  </Trigger>
</Modal>

Video

<Modal>
  <Content>
    <iframe
      src="https://www.youtube.com/embed/7xDcmL5-ET8"
      title="YouTube video player"
      frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen
    />
  </Content>
  <Trigger>
    <button class="btn">Open video default</button>
  </Trigger>
</Modal>

<!-- required styles -->
<style>
  iframe {
  width: 100%;
  aspect-ratio: 16/9;
  height: auto;
}
</style>

Video big layout

<Modal big>
  <Content>
    <iframe
      src="https://www.youtube.com/embed/7xDcmL5-ET8"
      title="YouTube video player"
      frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen
    />
  </Content>
  <Trigger>
    <button class="btn">Open video + big layout</button>
  </Trigger>
</Modal>

<!-- required styles -->
<style>
  iframe {
  width: 100%;
  aspect-ratio: 16/9;
  height: auto;
}
</style>

Video big layout without close button

<Modal big={true} button={false}>
  <Content>
    <iframe
      src="https://www.youtube.com/embed/7xDcmL5-ET8"
      title="YouTube video player"
      frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen
    />
  </Content>
  <Trigger>
    <button class="btn">Open video + big layout + no close button</button>
  </Trigger>
</Modal>

Video fullscreen layout without close button

<Modal fullscreen button={false}>
  <Content>
    <iframe
      src="https://www.youtube.com/embed/7xDcmL5-ET8"
      title="YouTube video player"
      frameborder="0"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen
    />
  </Content>
  <Trigger>
    <button class="btn">Open video + fullscreen layout</button>
  </Trigger>
</Modal>

<!-- required styles -->
<style>
  iframe {
  width: 100%;
  aspect-ratio: 16/9;
  height: auto;
}
</style>

Image as a trigger & content

<Modal big={true} button={false}>
  <Content>
    <img src="https://picsum.photos/id/237/1000/600" alt="a dog" />
  </Content>
  <Trigger>
    <img src="https://picsum.photos/id/237/300/200" alt="a dog" />
  </Trigger>
</Modal>

github npm