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

a dog

<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

Top categories

svelte logo

Need a Svelte website built?

Hire a professional Svelte developer today.
Loading Svelte Themes