From a41ffea146bf1a392de255f04bf64599de165269 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Fri, 18 Oct 2019 11:53:38 -0400
Subject: [PATCH] =?UTF-8?q?render=20modals=20into=20the=20=E2=80=9Cmodal?=
 =?UTF-8?q?=E2=80=9D=20portal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |  2 +-
 src/components/media_modal/media_modal.vue    |  2 +-
 src/components/modal/modal.js                 | 20 +++++++++++++
 src/components/modal/modal.vue                | 28 ++++++++-----------
 .../post_status_modal/post_status_modal.vue   |  4 +--
 5 files changed, 36 insertions(+), 20 deletions(-)
 create mode 100644 src/components/modal/modal.js

diff --git a/src/App.vue b/src/App.vue
index dbe842ec..33077c9c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -120,7 +120,7 @@
     <MobilePostStatusButton />
     <UserReportingModal />
     <PostStatusModal />
-    <portal-target name="modal" />
+    <portal-target name="modal" multiple />
   </div>
 </template>
 
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index 852bfe1f..35f6f9e9 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/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
diff --git a/src/components/modal/modal.js b/src/components/modal/modal.js
new file mode 100644
index 00000000..b9517445
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index 8edfbd45..e5831c47 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -1,22 +1,18 @@
 <template>
-  <div
-    v-body-scroll-lock="true"
-    class="modal-view"
-    @click.self="closeModal"
-  >
-    <slot />
-  </div>
+  <portal to="modal">
+    <div
+      ref="view"
+      v-body-scroll-lock="isOpen"
+      v-show="isOpen"
+      :class="['modal-view', viewClass]"
+      @click.self="closeModal"
+    >
+      <slot />
+    </div>
+  </portal>
 </template>
 
-<script>
-export default {
-  methods: {
-    closeModal () {
-      this.$emit('close')
-    }
-  }
-}
-</script>
+<script src="./modal.js"></script>
 
 <style lang="scss">
 .modal-view {
diff --git a/src/components/post_status_modal/post_status_modal.vue b/src/components/post_status_modal/post_status_modal.vue
index d1caf38f..2fbb7cc7 100644
--- a/src/components/post_status_modal/post_status_modal.vue
+++ b/src/components/post_status_modal/post_status_modal.vue
@@ -1,8 +1,8 @@
 <template>
   <Modal
     v-if="isLoggedIn && !resettingForm"
-    v-show="modalActivated"
-    class="post-form-modal-view"
+    :is-open="modalActivated"
+    view-class="post-form-modal-view"
     @close="closeModal"
   >
     <div class="post-form-modal-panel panel">