blob: c9f334cce7385b8cefd2e1b817faf67e702226a9 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
<script lang="ts">
import type { Snippet } from 'svelte';
interface Props {
title: string;
onClose: () => void;
wide?: boolean;
children?: Snippet;
}
let { title, onClose, wide = false, children }: Props = $props();
function onBackdrop(e: MouseEvent) {
if (e.target === e.currentTarget) onClose();
}
function onKeydown(e: KeyboardEvent) {
if (e.key === 'Escape') onClose();
}
let container: HTMLDivElement;
$effect(() => {
container?.focus();
});
</script>
<div
class="overlay"
onclick={onBackdrop}
role="presentation"
onkeydown={onKeydown}
tabindex="-1"
bind:this={container}
>
<div class="dialog card" role="dialog" aria-modal="true" aria-label={title}>
<div class="spread">
<h2>{title}</h2>
<button class="btn ghost" onclick={onClose} aria-label="关闭">✕</button>
</div>
<div class="content">
{@render children?.()}
</div>
</div>
</div>
<style>
.overlay {
position: fixed;
inset: 0;
background: rgba(15, 30, 35, 0.35);
display: grid;
place-items: center;
z-index: 50;
padding: 1rem;
}
.dialog {
width: min(760px, 100%);
max-height: 88vh;
overflow: auto;
padding: 1.1rem 1.2rem;
}
.content { margin-top: 0.6rem; }
</style>
|
