Skip to content

Latest commit

 

History

History
141 lines (137 loc) · 38.9 KB

README.md

File metadata and controls

141 lines (137 loc) · 38.9 KB
Raw

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

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>