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

Open a simple unstyled modal

<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

Open modal default (basic prop)

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

Close modal programmatically

Open modal default + programmatically close

<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

Open 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

Open modal with class p-4 (tailwind, bootstrap, or class based framework) on Content

<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

Open modal with 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

Open modal big

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

Video

Open video default

<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

Open 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

Open video + big layout + no 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

Open video + fullscreen layout

<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>