render modals into the “modal” portal

2 files changed, 32 insertions, 16 deletions

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 {