render modals into the “modal” portal

src/App.vue

@@ -120,7 +120,7 @@
     <MobilePostStatusButton />
     <UserReportingModal />
     <PostStatusModal />
-    <portal-target name="modal" />
+    <portal-target name="modal" multiple />
   </div>
 </template>
 

src/components/media_modal/media_modal.vue

@@ -1,7 +1,7 @@
 <template>
   <Modal
     v-if="showing"
-    class="media-modal-view"
+    view-class="media-modal-view"
     @close="hide"
   >
     <img

src/components/modal/modal.js

@@ -0,0 +1,20 @@
+import Vue from 'vue'
+
+const Modal = {
+  props: {
+    viewClass: {
+      type: String
+    },
+    isOpen: {
+      type: Boolean,
+      default: true
+    }
+  },
+  methods: {
+    closeModal () {
+      this.$emit('close')
+    }
+  }
+}
+
+export default Modal

src/components/modal/modal.vue

@@ -1,22 +1,18 @@
 <template>
+  <portal to="modal">
     <div
-    v-body-scroll-lock="true"
+      ref="view"
-    class="modal-view"
+      v-body-scroll-lock="isOpen"
+      v-show="isOpen"
+      :class="['modal-view', viewClass]"
       @click.self="closeModal"
     >
       <slot />
     </div>
+  </portal>
 </template>
 
-<script>
+<script src="./modal.js"></script>
-export default {
-  methods: {
-    closeModal () {
-      this.$emit('close')
-    }
-  }
-}
-</script>
 
 <style lang="scss">
 .modal-view {

src/components/post_status_modal/post_status_modal.vue

@@ -1,8 +1,8 @@
 <template>
   <Modal
     v-if="isLoggedIn && !resettingForm"
-    v-show="modalActivated"
+    :is-open="modalActivated"
-    class="post-form-modal-view"
+    view-class="post-form-modal-view"
     @close="closeModal"
   >
     <div class="post-form-modal-panel panel">