mirror of https://github.com/sveltejs/svelte
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
65 lines
1.1 KiB
65 lines
1.1 KiB
<script>
|
|
export let showModal; // boolean
|
|
|
|
let dialog; // HTMLDialogElement
|
|
|
|
$: if (dialog && showModal) dialog.showModal();
|
|
</script>
|
|
|
|
<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
|
|
<dialog
|
|
bind:this={dialog}
|
|
on:close={() => (showModal = false)}
|
|
on:click|self={() => dialog.close()}
|
|
>
|
|
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
|
<div on:click|stopPropagation>
|
|
<slot name="header" />
|
|
<hr />
|
|
<slot />
|
|
<hr />
|
|
<!-- svelte-ignore a11y-autofocus -->
|
|
<button autofocus on:click={() => dialog.close()}>close modal</button>
|
|
</div>
|
|
</dialog>
|
|
|
|
<style>
|
|
dialog {
|
|
max-width: 32em;
|
|
border-radius: 0.2em;
|
|
border: none;
|
|
padding: 0;
|
|
}
|
|
dialog::backdrop {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
}
|
|
dialog > div {
|
|
padding: 1em;
|
|
}
|
|
dialog[open] {
|
|
animation: zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
@keyframes zoom {
|
|
from {
|
|
transform: scale(0.95);
|
|
}
|
|
to {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
dialog[open]::backdrop {
|
|
animation: fade 0.2s ease-out;
|
|
}
|
|
@keyframes fade {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
button {
|
|
display: block;
|
|
}
|
|
</style>
|