Adding overflow:hidden to the body when "scrollable" is enabled. #71

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-js-modal",
   "description": "Modal Component for Vue.js",
-  "version": "1.2.9",
+  "version": "1.2.10",
   "author": "euvl <yev.vlasenko@gmail.com>",
   "main": "dist/index.js",
   "repository": {

src/Modal.vue

@@ -369,7 +369,7 @@
        * Event handler which is triggered on $modal.show and $modal.hight
        */
       toggle (state, params) {
-        const { reset, visible } = this
+        const { reset, scrollable, visible } = this
 
         const beforeEventName = visible
           ? 'before-close'
@@ -379,10 +379,22 @@
           ? 'closed'
           : 'opened'
 
-        if (beforeEventName === 'before-open' && reset) {
+        if (beforeEventName === 'before-open') {
-          this.setInitialSize()
+          if (reset) {
-          this.shift.left = 0
+            this.setInitialSize()
-          this.shift.top = 0
+            this.shift.left = 0
+            this.shift.top = 0
+          }
+
+          if (scrollable) {
+            document.body.classList.add('v--modal-block-scroll')
+          }
+        }
+
+        if (beforeEventName === 'before-close') {
+          if (scrollable) {
+            document.body.classList.remove('v--modal-block-scroll')
+          }
         }
 
         let stopEventExecution = false
@@ -489,6 +501,10 @@
   }
 </script>
 <style>
+  .v--modal-block-scroll {
+    overflow: hidden;
+  }
+
   .v--modal-overlay {
     position: fixed;
     box-sizing: border-box;