Commit | Line | Data |
---|---|---|
32de5a57 LM |
1 | <template> |
2 | <teleport to="body"> | |
01ff4231 | 3 | <div v-if="props.visibility" id="backdrop" @click.self="close()"> |
32de5a57 LM |
4 | <slot></slot> |
5 | </div> | |
6 | </teleport> | |
7 | </template> | |
8 | ||
9 | <script setup lang="ts"> | |
10 | const props = defineProps<{ | |
11 | visibility: boolean; | |
12 | }>(); | |
13 | ||
14 | const emit = defineEmits(['close']); | |
15 | ||
16 | function close() { | |
17 | emit('close'); | |
18 | } | |
19 | </script> | |
20 | ||
21 | <style> | |
22 | #backdrop { | |
23 | position: fixed; | |
24 | display: flex; | |
25 | justify-content: center; | |
26 | align-items: center; | |
27 | inset: 0; | |
28 | background-color: rgba(0, 0, 0, 0.2); | |
29 | } | |
30 | </style> |