Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sharu725/sv-popup

A simple popup/modal for svelte/sveltekit apps
https://github.com/sharu725/sv-popup

modal package popup svel svelte svelte-popup sveltekit

Last synced: 2 months ago
JSON representation

A simple popup/modal for svelte/sveltekit apps

Awesome Lists containing this project

README

        


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>


github   npm