Add ability to close the modal by clicking the overlay

README.md

@@ -44,6 +44,7 @@ modal-vue accepts 3 props which are passed to it as attributes in the `<modal>`
 - [showModal](#showmodal) (Boolean)
 - [closeAction](#closeaction) (Function)
 - [containerClass](#containerclass) (String)
+- [closeOnOverlayClick](#closeonoverlayclick) (Boolean)
 
 #### showModal
 If true, the modal dialog will be displayed. Pass in whatever state in your application controls this.
@@ -54,6 +55,9 @@ This is the function to called when the close button of the modal dialog is clic
 #### containerClass
 This is optional and specifies a Bootstrap container class to be used for the `<div>` that wraps the modal dialog if required.
 
+#### closeOnOverlayClick
+If true, the `closeAction` will also be fired when the overlay is clicked.
+
 ### slots
 
 modal-vue has 3 html slots which are defined as child elements of the `<modal>` element:

demo/App.vue

@@ -21,14 +21,16 @@
     </div>
     <simple-dialog v-if="exampleName==='Simple'" :showModal="showModal" :closeAction="closeDialog"></simple-dialog>
     <full-dialog v-if="exampleName==='Full'" :showModal="showModal" :closeAction="closeDialog" :clickAction="clickAction"></full-dialog>
+    <overlay-dialog v-if="exampleName==='Overlay'" :showModal="showModal" :closeAction="closeDialog" :clickAction="clickAction"></overlay-dialog>
   </div>
 </template>
 
 <script>
   import SimpleDialog from './SimpleDialog.vue'
   import FullDialog from './FullDialog.vue'
+  import OverlayDialog from './OverlayDialog.vue'
   export default {
-    components: { SimpleDialog, FullDialog },
+    components: { SimpleDialog, FullDialog, OverlayDialog },
     data () {
       return {
         showModal: false,
@@ -41,6 +43,10 @@
           {
             name: 'Full',
             text: 'A more complex example with a button in the footer.'
+          },
+          {
+            name: 'Overlay',
+            text: 'An example showing the ability to close the modal by clicking the overlay.'
           }
         ]
       }

demo/OverlayDialog.vue

@@ -0,0 +1,21 @@
+<template>
+  <modal :showModal="showModal" :closeAction="closeAction" :closeOnOverlayClick="true">
+    <h1 slot="header">Overlay Dialog</h1>
+    <span slot="body">
+      Hello <strong>overlay!</strong><br />
+      Click the overlay to close me!
+    </span>
+  </modal>
+</template>
+
+<script>
+  import Modal from 'modal-vue'
+  export default {
+    props: ['showModal', 'closeAction'],
+    components: { Modal }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/components/Modal.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="containerClass">
-    <div :class="{modal: true, in: showModal}" :style="{ display: showModal ? 'block' : 'none' }">
+    <div :class="{modal: true, in: showModal}" :style="{ display: showModal ? 'block' : 'none' }" @click="modalClick" ref="modal">
       <div class="modal-dialog">
         <div class="modal-content">
           <div v-if="this.$slots.header || closeAction" class="modal-header">
@@ -25,8 +25,28 @@
     props: {
       showModal: Boolean,
       closeAction: Function,
-      containerClass: String
-    }
+      containerClass: String,
+      closeOnOverlayClick: Boolean,
+    },
+    methods: {
+      modalClick(e) {
+        // the modal-backdrop is not accessible because of `display: block`.
+        // because of this, we need to ensure the clicked target is our modal container,
+        // which takes up the entire viewport.
+        if (!this.closeOnOverlayClick || e.target != this.$refs.modal) {
+          return;
+        }
+
+        // only call the close action if it exists
+        if (this.closeAction) {
+          this.closeAction();
+        }
+
+        e.stopPropagation();
+
+        return false;
+      },
+    },
   }
 </script>