Merge pull request #174 from JaZo/issue-162

Added extra wrapper div to listen to background click events

src/Modal.vue

@@ -4,7 +4,8 @@
          ref="overlay"
          :class="overlayClass"
          :aria-expanded="visible.toString()"
-         :data-modal="name"
+         :data-modal="name">
+      <div :class="backgroundClickClass"
            @mousedown.stop="onBackgroundClick"
            @touchstart.stop="onBackgroundClick">
         <div class="v--modal-top-right">
@@ -25,6 +26,7 @@
           </div>
         </transition>
       </div>
+    </div>
   </transition>
 </template>
 <script>
@@ -359,6 +361,12 @@ export default {
         scrollable: this.scrollable && this.isAutoHeight
       }
     },
+    /**
+     * Returns class list for click outside overlay (background click)
+     */
+    backgroundClickClass() {
+      return ['v--modal-background-click']
+    },
     /**
      * Returns class list for modal itself
      */
@@ -656,10 +664,15 @@ export default {
   height: 100%;
   min-height: 100vh;
   overflow-y: auto;
-  padding-bottom: 10px;
   -webkit-overflow-scrolling: touch;
 }
 
+.v--modal-overlay .v--modal-background-click {
+  min-height: 100%;
+  width: 100%;
+  padding-bottom: 10px;
+}
+
 .v--modal-overlay .v--modal-box {
   position: relative;
   overflow: hidden;