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<{ | |
66a7748d JB |
11 | visibility: boolean |
12 | }>() | |
32de5a57 | 13 | |
66a7748d | 14 | const emit = defineEmits(['close']) |
32de5a57 LM |
15 | |
16 | function close() { | |
66a7748d | 17 | emit('close') |
32de5a57 LM |
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> |