diff --git a/README.md b/README.md
index b9fea4f..5a69e05 100644
--- a/README.md
+++ b/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:
diff --git a/demo/App.vue b/demo/App.vue
index ee4191b..ebfc19c 100644
--- a/demo/App.vue
+++ b/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.'
           }
         ]
       }
diff --git a/demo/OverlayDialog.vue b/demo/OverlayDialog.vue
new file mode 100644
index 0000000..3504aba
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/dist/index.js b/dist/index.js
index 09fdba1..ea2f15d 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports["modal-vue"]=t():e["modal-vue"]=t()}(this,function(){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=9)}([function(e,t,n){n(6);var r=n(4)(n(1),n(5),"data-v-5e6a9794",null);e.exports=r.exports},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={props:{showModal:Boolean,closeAction:Function,containerClass:String}}},function(e,t,n){t=e.exports=n(3)(),t.push([e.i,"",""])},function(e,t){e.exports=function(){var e=[];return e.toString=function(){for(var e=[],t=0;t<this.length;t++){var n=this[t];n[2]?e.push("@media "+n[2]+"{"+n[1]+"}"):e.push(n[1])}return e.join("")},e.i=function(t,n){"string"==typeof t&&(t=[[null,t,""]]);for(var r={},o=0;o<this.length;o++){var s=this[o][0];"number"==typeof s&&(r[s]=!0)}for(o=0;o<t.length;o++){var a=t[o];"number"==typeof a[0]&&r[a[0]]||(n&&!a[2]?a[2]=n:n&&(a[2]="("+a[2]+") and ("+n+")"),e.push(a))}},e}},function(e,t){e.exports=function(e,t,n,r){var o,s=e=e||{},a=typeof e.default;"object"!==a&&"function"!==a||(o=e,s=e.default);var i="function"==typeof s?s.options:s;if(t&&(i.render=t.render,i.staticRenderFns=t.staticRenderFns),n&&(i._scopeId=n),r){var u=i.computed||(i.computed={});Object.keys(r).forEach(function(e){var t=r[e];u[e]=function(){return t}})}return{esModule:o,exports:s,options:i}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{class:e.containerClass},[n("div",{class:{modal:!0,in:e.showModal},style:{display:e.showModal?"block":"none"}},[n("div",{staticClass:"modal-dialog"},[n("div",{staticClass:"modal-content"},[this.$slots.header||e.closeAction?n("div",{staticClass:"modal-header"},[n("button",{staticClass:"close",on:{click:e.closeAction}},[e._v("x")]),e._v(" "),e._t("header")],2):e._e(),e._v(" "),this.$slots.body?n("div",{staticClass:"modal-body"},[e._t("body")],2):e._e(),e._v(" "),this.$slots.footer?n("div",{staticClass:"modal-footer"},[e._t("footer")],2):e._e()])])]),e._v(" "),n("div",{class:{"modal-backdrop":e.showModal,in:e.showModal}})])},staticRenderFns:[]}},function(e,t,n){var r=n(2);"string"==typeof r&&(r=[[e.i,r,""]]),r.locals&&(e.exports=r.locals),n(7)("778b1955",r,!0)},function(e,t,n){function r(e){for(var t=0;t<e.length;t++){var n=e[t],r=l[n.id];if(r){r.refs++;for(var o=0;o<r.parts.length;o++)r.parts[o](n.parts[o]);for(;o<n.parts.length;o++)r.parts.push(a(n.parts[o]));r.parts.length>n.parts.length&&(r.parts.length=n.parts.length)}else{for(var s=[],o=0;o<n.parts.length;o++)s.push(a(n.parts[o]));l[n.id]={id:n.id,refs:1,parts:s}}}}function o(e,t){for(var n=[],r={},o=0;o<t.length;o++){var s=t[o],a=s[0],i=s[1],u=s[2],c=s[3],l={css:i,media:u,sourceMap:c};r[a]?(l.id=e+":"+r[a].parts.length,r[a].parts.push(l)):(l.id=e+":0",n.push(r[a]={id:a,parts:[l]}))}return n}function s(){var e=document.createElement("style");return e.type="text/css",d.appendChild(e),e}function a(e){var t,n,r=document.querySelector('style[data-vue-ssr-id~="'+e.id+'"]'),o=null!=r;if(o&&v)return h;if(m){var a=p++;r=f||(f=s()),t=i.bind(null,r,a,!1),n=i.bind(null,r,a,!0)}else r=r||s(),t=u.bind(null,r),n=function(){r.parentNode.removeChild(r)};return o||t(e),function(r){if(r){if(r.css===e.css&&r.media===e.media&&r.sourceMap===e.sourceMap)return;t(e=r)}else n()}}function i(e,t,n,r){var o=n?"":r.css;if(e.styleSheet)e.styleSheet.cssText=y(t,o);else{var s=document.createTextNode(o),a=e.childNodes;a[t]&&e.removeChild(a[t]),a.length?e.insertBefore(s,a[t]):e.appendChild(s)}}function u(e,t){var n=t.css,r=t.media,o=t.sourceMap;if(r&&e.setAttribute("media",r),o&&(n+="\n/*# sourceURL="+o.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */"),e.styleSheet)e.styleSheet.cssText=n;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}var c="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!c)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var o=n(8),l={},d=c&&(document.head||document.getElementsByTagName("head")[0]),f=null,p=0,v=!1,h=function(){},m="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());e.exports=function(e,t,n){v=n;var s=o(e,t);return r(s),function(t){for(var n=[],a=0;a<s.length;a++){var i=s[a],u=l[i.id];u.refs--,n.push(u)}t?(s=o(e,t),r(s)):s=[];for(var a=0;a<n.length;a++){var u=n[a];if(0===u.refs){for(var c=0;c<u.parts.length;c++)u.parts[c]();delete l[u.id]}}}};var y=function(){var e=[];return function(t,n){return e[t]=n,e.filter(Boolean).join("\n")}}()},function(e,t){e.exports=function(e,t){for(var n=[],r={},o=0;o<t.length;o++){var s=t[o],a=s[0],i=s[1],u=s[2],c=s[3],l={id:e+":"+o,css:i,media:u,sourceMap:c};r[a]?r[a].parts.push(l):n.push(r[a]={id:a,parts:[l]})}return n}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(0),o=n.n(r);t.default=o.a}])});
\ No newline at end of file
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports["modal-vue"]=t():e["modal-vue"]=t()}(this,function(){return function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:o})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=9)}([function(e,t,n){n(6);var o=n(4)(n(1),n(5),"data-v-5e6a9794",null);e.exports=o.exports},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={props:{showModal:Boolean,closeAction:Function,containerClass:String,closeOnOverlayClick:Boolean},methods:{modalClick:function(e){if(this.closeOnOverlayClick&&e.target==this.$refs.modal)return this.closeAction&&this.closeAction(),e.stopPropagation(),!1}}}},function(e,t,n){t=e.exports=n(3)(),t.push([e.i,"",""])},function(e,t){e.exports=function(){var e=[];return e.toString=function(){for(var e=[],t=0;t<this.length;t++){var n=this[t];n[2]?e.push("@media "+n[2]+"{"+n[1]+"}"):e.push(n[1])}return e.join("")},e.i=function(t,n){"string"==typeof t&&(t=[[null,t,""]]);for(var o={},r=0;r<this.length;r++){var s=this[r][0];"number"==typeof s&&(o[s]=!0)}for(r=0;r<t.length;r++){var i=t[r];"number"==typeof i[0]&&o[i[0]]||(n&&!i[2]?i[2]=n:n&&(i[2]="("+i[2]+") and ("+n+")"),e.push(i))}},e}},function(e,t){e.exports=function(e,t,n,o){var r,s=e=e||{},i=typeof e.default;"object"!==i&&"function"!==i||(r=e,s=e.default);var a="function"==typeof s?s.options:s;if(t&&(a.render=t.render,a.staticRenderFns=t.staticRenderFns),n&&(a._scopeId=n),o){var c=a.computed||(a.computed={});Object.keys(o).forEach(function(e){var t=o[e];c[e]=function(){return t}})}return{esModule:r,exports:s,options:a}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{class:e.containerClass},[n("div",{ref:"modal",class:{modal:!0,in:e.showModal},style:{display:e.showModal?"block":"none"},on:{click:e.modalClick}},[n("div",{staticClass:"modal-dialog"},[n("div",{staticClass:"modal-content"},[this.$slots.header||e.closeAction?n("div",{staticClass:"modal-header"},[n("button",{staticClass:"close",on:{click:e.closeAction}},[e._v("x")]),e._v(" "),e._t("header")],2):e._e(),e._v(" "),this.$slots.body?n("div",{staticClass:"modal-body"},[e._t("body")],2):e._e(),e._v(" "),this.$slots.footer?n("div",{staticClass:"modal-footer"},[e._t("footer")],2):e._e()])])]),e._v(" "),n("div",{class:{"modal-backdrop":e.showModal,in:e.showModal}})])},staticRenderFns:[]}},function(e,t,n){var o=n(2);"string"==typeof o&&(o=[[e.i,o,""]]),o.locals&&(e.exports=o.locals),n(7)("0f894654",o,!0)},function(e,t,n){function o(e){for(var t=0;t<e.length;t++){var n=e[t],o=u[n.id];if(o){o.refs++;for(var r=0;r<o.parts.length;r++)o.parts[r](n.parts[r]);for(;r<n.parts.length;r++)o.parts.push(s(n.parts[r]));o.parts.length>n.parts.length&&(o.parts.length=n.parts.length)}else{for(var i=[],r=0;r<n.parts.length;r++)i.push(s(n.parts[r]));u[n.id]={id:n.id,refs:1,parts:i}}}}function r(){var e=document.createElement("style");return e.type="text/css",d.appendChild(e),e}function s(e){var t,n,o=document.querySelector('style[data-vue-ssr-id~="'+e.id+'"]');if(o){if(v)return h;o.parentNode.removeChild(o)}if(m){var s=p++;o=f||(f=r()),t=i.bind(null,o,s,!1),n=i.bind(null,o,s,!0)}else o=r(),t=a.bind(null,o),n=function(){o.parentNode.removeChild(o)};return t(e),function(o){if(o){if(o.css===e.css&&o.media===e.media&&o.sourceMap===e.sourceMap)return;t(e=o)}else n()}}function i(e,t,n,o){var r=n?"":o.css;if(e.styleSheet)e.styleSheet.cssText=y(t,r);else{var s=document.createTextNode(r),i=e.childNodes;i[t]&&e.removeChild(i[t]),i.length?e.insertBefore(s,i[t]):e.appendChild(s)}}function a(e,t){var n=t.css,o=t.media,r=t.sourceMap;if(o&&e.setAttribute("media",o),r&&(n+="\n/*# sourceURL="+r.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */"),e.styleSheet)e.styleSheet.cssText=n;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}var c="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!c)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var l=n(8),u={},d=c&&(document.head||document.getElementsByTagName("head")[0]),f=null,p=0,v=!1,h=function(){},m="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());e.exports=function(e,t,n){v=n;var r=l(e,t);return o(r),function(t){for(var n=[],s=0;s<r.length;s++){var i=r[s],a=u[i.id];a.refs--,n.push(a)}t?(r=l(e,t),o(r)):r=[];for(var s=0;s<n.length;s++){var a=n[s];if(0===a.refs){for(var c=0;c<a.parts.length;c++)a.parts[c]();delete u[a.id]}}}};var y=function(){var e=[];return function(t,n){return e[t]=n,e.filter(Boolean).join("\n")}}()},function(e,t){e.exports=function(e,t){for(var n=[],o={},r=0;r<t.length;r++){var s=t[r],i=s[0],a=s[1],c=s[2],l=s[3],u={id:e+":"+r,css:a,media:c,sourceMap:l};o[i]?o[i].parts.push(u):n.push(o[i]={id:i,parts:[u]})}return n}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(0),r=n.n(o);t.default=r.a}])});
\ No newline at end of file
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index 80fd332..44e9a76 100644
--- a/src/components/Modal.vue
+++ b/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>