ui/web/src/components/Modal.vue

   1 <template>
   2   <teleport to="body">
   3     <div id="backdrop" v-if="props.visibility" @click.self="close()">
   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>