1 files changed, 13 insertions, 4 deletions
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index e5ecc0c0..2b58913f 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -1,9 +1,9 @@
 <template>
   <div
     v-show="isOpen"
-    v-body-scroll-lock="isOpen"
+    v-body-scroll-lock="isOpen && !noBackground"
     class="modal-view"
-    :class="{ 'modal-background': !noBackground }"
+    :class="classes"
     @click.self="$emit('backdropClicked')"
   >
     <slot />
@@ -21,6 +21,14 @@ export default {
       type: Boolean,
       default: false
     }
+  },
+  computed: {
+    classes () {
+      return {
+        'modal-background': !this.noBackground,
+        'open': this.isOpen
+      }
+    }
   }
 }
 </script>
@@ -40,6 +48,7 @@ export default {
   pointer-events: none;
   animation-duration: 0.2s;
   animation-name: modal-background-fadein;
+  opacity: 0;
 
   > * {
     pointer-events: initial;
@@ -50,8 +59,8 @@ export default {
     background-color: rgba(0, 0, 0, 0.5);
   }
 
-  body:not(.scroll-locked) & {
-    opacity: 0;
+  &.open {
+    opacity: 1;
   }
 }