Fixed modals not appearing on top

package-lock.json

@@ -9,6 +9,7 @@
 			"version": "0.1.0",
 			"dependencies": {
 				"core-js": "^3.6.5",
+				"portal-vue": "^2.1.7",
 				"vue": "^2.6.11",
 				"vue-frag": "^1.1.5",
 				"vue-reactive-provide": "^0.3.0",
@@ -9873,6 +9874,14 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/portal-vue": {
+			"version": "2.1.7",
+			"resolved": "https://registry.npmjs.org/portal-vue/-/portal-vue-2.1.7.tgz",
+			"integrity": "sha512-+yCno2oB3xA7irTt0EU5Ezw22L2J51uKAacE/6hMPMoO/mx3h4rXFkkBkT4GFsMDv/vEe8TNKC3ujJJ0PTwb6g==",
+			"peerDependencies": {
+				"vue": "^2.5.18"
+			}
+		},
 		"node_modules/portfinder": {
 			"version": "1.0.28",
 			"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",
@@ -22701,6 +22710,12 @@
 				"ts-pnp": "^1.1.6"
 			}
 		},
+		"portal-vue": {
+			"version": "2.1.7",
+			"resolved": "https://registry.npmjs.org/portal-vue/-/portal-vue-2.1.7.tgz",
+			"integrity": "sha512-+yCno2oB3xA7irTt0EU5Ezw22L2J51uKAacE/6hMPMoO/mx3h4rXFkkBkT4GFsMDv/vEe8TNKC3ujJJ0PTwb6g==",
+			"requires": {}
+		},
 		"portfinder": {
 			"version": "1.0.28",
 			"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz",

package.json

@@ -9,6 +9,7 @@
 	},
 	"dependencies": {
 		"core-js": "^3.6.5",
+		"portal-vue": "^2.1.7",
 		"vue": "^2.6.11",
 		"vue-frag": "^1.1.5",
 		"vue-reactive-provide": "^0.3.0",

src/App.vue

@@ -3,6 +3,7 @@
 		<Nav />
 		<Tabs />
 		<TPS v-if="showTPS" />
+		<portal-target name="modal-root" multiple />
 	</div>
 </template>
 

src/components/index.js

@@ -67,6 +67,7 @@ import 'vue-transition-expand/dist/vue-transition-expand.css';
 import PerfectScrollbar from 'vue2-perfect-scrollbar';
 import 'vue2-perfect-scrollbar/dist/vue2-perfect-scrollbar.css';
 import VueTextareaAutosize from 'vue-textarea-autosize';
+import PortalVue from 'portal-vue';
 
 /* features */
 Vue.component(Achievement.name, Achievement);
@@ -130,3 +131,4 @@ Vue.directive('frag', frag);
 Vue.use(TransitionExpand);
 Vue.use(PerfectScrollbar);
 Vue.use(VueTextareaAutosize);
+Vue.use(PortalVue);

src/components/system/Modal.vue

@@ -1,34 +1,36 @@
 <template>
-	<transition name="modal">
+	<portal to="modal-root">
-		<div class="modal-mask" v-show="show" v-on:pointerdown.self="$emit('close')">
+		<transition name="modal">
-			<div class="modal-wrapper">
+			<div class="modal-mask" v-show="show" v-on:pointerdown.self="$emit('close')">
-				<div class="modal-container">
+				<div class="modal-wrapper">
-					<div class="modal-header">
+					<div class="modal-container">
-						<slot name="header">
+						<div class="modal-header">
-							default header
+							<slot name="header">
-						</slot>
+								default header
-					</div>
-					<perfect-scrollbar class="modal-body">
-						<branches>
-							<slot name="body">
-								default body
 							</slot>
-						</branches>
+						</div>
-					</perfect-scrollbar>
+						<perfect-scrollbar class="modal-body">
-					<div class="modal-footer">
+							<branches>
-						<slot name="footer">
+								<slot name="body">
-							<div class="modal-default-footer">
+									default body
-								<div class="modal-default-flex-grow"></div>
+								</slot>
-								<button class="button modal-default-button" @click="$emit('close')">
+							</branches>
-									Close
+						</perfect-scrollbar>
-								</button>
+						<div class="modal-footer">
-							</div>
+							<slot name="footer">
-						</slot>
+								<div class="modal-default-footer">
+									<div class="modal-default-flex-grow"></div>
+									<button class="button modal-default-button" @click="$emit('close')">
+										Close
+									</button>
+								</div>
+							</slot>
+						</div>
 					</div>
 				</div>
 			</div>
-		</div>
+		</transition>
-	</transition>
+	</portal>
 </template>
 
 <script>