From 42d0fe483ebb10db61ed071ec3d9accd7844084a Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Tyler.Akins1999@gmail.com>
Date: Sun, 13 Dec 2020 17:17:32 -0700
Subject: [PATCH] Add teleport to Modals.

---
 web/src/components/Modal.vue | 30 ++++++++++++++++--------------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/web/src/components/Modal.vue b/web/src/components/Modal.vue
index 17ad7c0..51d6c13 100644
--- a/web/src/components/Modal.vue
+++ b/web/src/components/Modal.vue
@@ -1,18 +1,20 @@
 <template>
-	<transition name="fade" @after-enter="content = true">
-		<div
-			v-if="show"
-			class="modal-container"
-			:class="closable ? 'clickable' : ''"
-			@click.self.stop="handleBackgroundClick"
-		>
-			<transition name="burst" @after-leave="$emit('closed')">
-				<div v-if="content" class="modal unclickable">
-					<slot />
-				</div>
-			</transition>
-		</div>
-	</transition>
+	<teleport to="body">
+		<transition name="fade" @after-enter="content = true">
+			<div
+				v-if="show"
+				class="modal-container"
+				:class="closable ? 'clickable' : ''"
+				@click.self.stop="handleBackgroundClick"
+			>
+				<transition name="burst" @after-leave="$emit('closed')">
+					<div v-if="content" class="modal unclickable">
+						<slot />
+					</div>
+				</transition>
+			</div>
+		</transition>
+	</teleport>
 </template>
 
 <script>