diff --git a/src/components/ModalComponent.vue b/src/components/ModalComponent.vue
index f1e5ad9b..16ebf813 100644
--- a/src/components/ModalComponent.vue
+++ b/src/components/ModalComponent.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="modal">
-        <div>
+        <div @click="handleClick">
             <div class="modal-container">
                 <slot></slot>
             </div>
@@ -23,6 +23,10 @@ export default {
             } else return;
             event.preventDefault();
         },
+        handleClick(event) {
+            if (event.target !== event.currentTarget) return;
+            this.$emit("close");
+        },
     },
 };
 </script>