portfolio/components/SimpleModal.vue

<template>
  <Teleport to="body">
    <div v-if="modelValue" class="fixed inset-0 z-50">
      <!-- Backdrop - click to close -->
      <div class="fixed inset-0 bg-black/50 cursor-pointer" @click="close"></div>
      
      <!-- Modal Panel -->
      <div class="fixed inset-0 flex items-center justify-center pointer-events-none">
        <div 
          class="bg-white rounded-lg shadow-xl w-[80vw] aspect-video max-h-[85vh] overflow-hidden relative pointer-events-auto"
          :style="{ maxHeight }"
        >
          <!-- Content -->
          <slot />
        </div>
      </div>
    </div>
  </Teleport>
</template>

<script setup>
defineProps({
  modelValue: Boolean,
  maxHeight: {
    type: String,
    default: '85vh'
  }
})

const emit = defineEmits(['update:modelValue'])

const close = () => {
  emit('update:modelValue', false)
}
</script>