Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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
- Host: GitHub
- URL: https://github.com/sharu725/sv-popup
- Owner: sharu725
- Created: 2022-04-09T18:39:49.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2024-08-04T15:20:05.000Z (5 months ago)
- Last Synced: 2024-10-12T19:29:05.612Z (3 months ago)
- Topics: modal, package, popup, svel, svelte, svelte-popup, sveltekit
- Language: Svelte
- Homepage: https://sv-popup.sveltethemes.dev
- Size: 151 KB
- Stars: 14
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
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 Featurebasic
false
Adds white background to the Modalsmall
false
Pops small modalbig
false
Pops big modalfullscreen
false
Pops fullscreen modalbutton
true
Shows close buttonclose
false
Set to true to close the modalLimitations
- 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>