mirror of
https://github.com/BradNut/svelte-library
synced 2025-09-08 17:40:21 +00:00
40 lines
761 B
Svelte
40 lines
761 B
Svelte
<script>
|
|
import { fly, fade } from 'svelte/transition';
|
|
import Portal from './Portal.svelte';
|
|
|
|
export let isModalOpen = false;
|
|
|
|
function closeModal() {
|
|
isModalOpen = false;
|
|
}
|
|
</script>
|
|
|
|
{#if isModalOpen}
|
|
<Portal>
|
|
<div class="modal-wrapper" transition:fly={{ opacity: 0, y: 100 }}>
|
|
<button on:click={closeModal} aria-label="Close Modal Box">Close</button>
|
|
<slot />
|
|
</div>
|
|
<div on:click={closeModal} transition:fade class="background" />
|
|
</Portal>
|
|
{/if}
|
|
|
|
<style>
|
|
.modal-wrapper {
|
|
position: fixed;
|
|
inset: 100px 0 0;
|
|
min-width: 320px;
|
|
max-width: 530px;
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
z-index: 101;
|
|
}
|
|
.background {
|
|
background: black;
|
|
opacity: 0.8;
|
|
cursor: pointer;
|
|
inset: 0;
|
|
position: fixed;
|
|
z-index: 100;
|
|
}
|
|
</style>
|