diff --git a/README.md b/README.md
index f99cf42..c767b0d 100644
--- a/README.md
+++ b/README.md
@@ -113,7 +113,7 @@ this.$modal.show('dialog', {
   title: 'Alert!',
   text: 'You are too awesome',
   buttons: [
-    { 
+    {
       title: 'Deal with it',
       handler: () => { alert('Woot!') }
     },
@@ -122,7 +122,7 @@ this.$modal.show('dialog', {
       default: true,    // Will be triggered by default if 'Enter' pressed.
       handler: () => {} // Button click handler
     },
-    { 
+    {
       title: 'Close'
     }
  ]
@@ -133,6 +133,50 @@ this.$modal.show('dialog', {
   <img src="https://user-images.githubusercontent.com/1577802/29165216-ec62552c-7db9-11e7-807e-ef341edcc94d.png">
 </p>
 
+### Dynamic Modals
+
+In order to instantiate modals at runtime (for lazy-loading or decluttering templates), it is possible to create modals dynamically.
+
+To start using this feature you must set `dynamic: true` in plugin configuration:
+
+```js
+Vue.use(VModal, { dynamic: true })
+```
+
+And include the `<modals-container/>` component it in your project:
+
+```vue
+<modals-container/>
+```
+
+Call it (the first argument is the component definition, the second are component properties, and the third modal parameters):
+
+```javascript
+this.$modal.show({
+  template: `
+    <div>
+      <h1>This is created inline</h1>
+      <p>{{ text }}</p>
+    </div>
+  `,
+  props: ['text']
+}, {
+  text: 'This text is passed as a property'
+})
+```
+
+It can also be used with `.vue` files:
+
+```javascript
+import MyComponent from './MyComponent.vue'
+
+this.$modal.show(MyComponent, {
+  text: 'This text is passed as a property'
+}, {
+  draggable: true
+})
+```
+
 For more examples please take a look at [vue-js-modal.yev.io](http://vue-js-modal.yev.io).
 
 ### SSR
@@ -156,6 +200,10 @@ Vue.use(VModal)
 
 For full demo please look at `demo/server_side_rendering`
 
+### Extracted CSS
+
+There is also a ssr build with css file extracted. Take a look in /dist folder.
+
 ### Properties
 
 | Name      | Required | Type          | Default     | Description |
@@ -172,8 +220,10 @@ For full demo please look at `demo/server_side_rendering`
 | classes   | false | [String, Array]  | 'v--modal'| Classes that will be applied to the actual modal box, if not specified, the default 'vue--modal' class will be applied |
 | width     | false | [String, Number] | 600         | Width in pixels or percents (e.g. 50 or "50px", "50%") |
 | height    | false | [String, Number] | 300         | Height in pixels or percents (e.g. 50 or "50px", "50%") or `"auto"` |
-| minWidth  | false | Number           | 0           | The minimum width to which modal can be resized  |
-| minHeight | false | Number           | 0           | The minimum height to which modal can be resized |
+| minWidth  | false | Number (px)      | 0           | The minimum width to which modal can be resized  |
+| minHeight | false | Number (px)      | 0           | The minimum height to which modal can be resized |
+| maxWidth  | false | Number (px)      | Infinity    | The maximum width of the modal (if the value is greater than window width, window width will be used instead |
+| maxHeight | false | Number (px)      | Infinity    | The maximum height of the modal (if the value is greater than window height, window height will be used instead |
 | pivotX    | false | Number (0 - 1.0) | 0.5         | Horizontal position in %, default is 0.5 (meaning that modal box will be in the middle (50% from left) of the window |
 | pivotY    | false | Number (0 - 1.0) | 0.5         | Vertical position in %, default is 0.5 (meaning that modal box will be in the middle (50% from top) of the window |
 
@@ -319,6 +369,15 @@ Dont forget about close button :)
 </modal>
 ```
 
+### Check out
+
+Check out my other projects:
+
+* https://github.com/euvl/vue-notification
+* https://github.com/euvl/vue-js-toggle-button
+* https://github.com/euvl/vue-js-popover
+* https://github.com/euvl/v-clipboard
+
 ### Developers
 
 To run an example:
diff --git a/demo/client_side_rendering/src/App.vue b/demo/client_side_rendering/src/App.vue
index 5772188..b49fcc5 100644
--- a/demo/client_side_rendering/src/App.vue
+++ b/demo/client_side_rendering/src/App.vue
@@ -7,6 +7,8 @@
   <demo-focus-modal/>
   <demo-size-modal/>
 
+  <modals-container />
+
   <v-dialog
     @before-opened="dialogEvent('before-open')"
     @before-closed="dialogEvent('before-close')"
@@ -106,6 +108,22 @@
       @click="showButtonsDialog">
       Dialog: buttons
     </button>
+    <br>
+    <button
+      class="btn"
+      @click="showDynamicRuntimeModal">
+      Dynamic: Runtime Modal
+    </button>
+    <button
+      class="btn"
+      @click="showDynamicComponentModal">
+      Dynamic: Component Modal
+    </button>
+    <button
+      class="btn"
+      @click="showDynamicComponentModalWithModalParams">
+      Dynamic: Component Modal with modal params
+    </button>
   </div>
 </div>
 </template>
@@ -118,6 +136,7 @@ import DemoLoginModal       from './components/DemoLoginModal.vue'
 import DemoDogProfileModal  from './components/DogProfileModal.vue'
 import DemoConditionalModal from './components/ConditionalModal.vue'
 import DemoSizeModal        from './components/SizeModal.vue'
+import CustomComponentModal from './components/CustomComponentModal.vue'
 
 export default {
   name: 'app',
@@ -203,6 +222,36 @@ export default {
       })
     },
 
+    showDynamicRuntimeModal () {
+      this.$modal.show({
+        template: `
+          <div>
+            <h1>This is created inline</h1>
+            <p>{{ text }}</p>
+          </div>
+        `,
+        props: ['text']
+      }, {
+        text: 'This text is passed as a property'
+      })
+    },
+
+    showDynamicComponentModal () {
+      this.$modal.show(CustomComponentModal, {
+        text: 'This text is passed as a property'
+      })
+    },
+
+    showDynamicComponentModalWithModalParams () {
+      this.$modal.show(CustomComponentModal, {
+        text: 'This text is passed as a property'
+      }, {
+        resizable: true,
+        adaptive: true,
+        draggable: true,
+      })
+    },
+
     dialogEvent (eventName) {
       console.log('Dialog event: ' + eventName)
     }
diff --git a/demo/client_side_rendering/src/components/ConditionalModal.vue b/demo/client_side_rendering/src/components/ConditionalModal.vue
index 98475a8..eae93b9 100644
--- a/demo/client_side_rendering/src/components/ConditionalModal.vue
+++ b/demo/client_side_rendering/src/components/ConditionalModal.vue
@@ -1,6 +1,10 @@
 <template>
   <modal name="conditional-modal"
          :adaptive="true"
+         :max-width="1000"
+         :max-height="400"
+         width="80%"
+         height="50%"
          @before-open="beforeOpen">
     <div style="padding:30px; text-align: center">
       Hello!
@@ -11,14 +15,14 @@
 export default {
   name: 'ConditionalModal',
   methods: {
-    beforeOpen (event) {
+    beforeOpen(event) {
       console.log('Event:', event)
       console.log('Params:', event.params)
 
       if (event.params.show === false) {
         event.stop()
       }
-    },
+    }
   }
 }
 </script>
diff --git a/demo/client_side_rendering/src/components/CustomComponentModal.vue b/demo/client_side_rendering/src/components/CustomComponentModal.vue
new file mode 100644
index 0000000..ac4b322
--- /dev/null
+++ b/demo/client_side_rendering/src/components/CustomComponentModal.vue
@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <h1>This is a custom component</h1>
+    <p>{{ text }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['text']
+}
+</script>
diff --git a/demo/client_side_rendering/src/main.js b/demo/client_side_rendering/src/main.js
index e88b15c..2a5aab7 100644
--- a/demo/client_side_rendering/src/main.js
+++ b/demo/client_side_rendering/src/main.js
@@ -3,7 +3,8 @@ import App        from './App.vue'
 import VueJsModal from 'plugin'
 
 Vue.use(VueJsModal, {
-  dialog: true
+  dialog: true,
+  dynamic: true,
 })
 
 new Vue({
diff --git a/dist/index.js b/dist/index.js
index 2e08eed..d7d71aa 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -207,16 +207,14 @@
     }, function(module, exports, __webpack_require__) {
         __webpack_require__(18);
         var Component = __webpack_require__(1)(__webpack_require__(7), __webpack_require__(15), null, null);
-        Component.options.__file = "/Users/yev.vlasenko2/Projects/vue/vue-js-modal/src/Dialog.vue", 
-        Component.esModule && Object.keys(Component.esModule).some(function(key) {
+        Component.options.__file = "D:\\Projects\\vue\\vue-js-modal\\src\\Dialog.vue", Component.esModule && Object.keys(Component.esModule).some(function(key) {
             return "default" !== key && "__esModule" !== key;
         }) && console.error("named exports are not supported in *.vue files."), Component.options.functional && console.error("[vue-loader] Dialog.vue: functional components are not supported with templates, they should use render functions."), 
         module.exports = Component.exports;
     }, function(module, exports, __webpack_require__) {
         __webpack_require__(19);
         var Component = __webpack_require__(1)(__webpack_require__(8), __webpack_require__(16), null, null);
-        Component.options.__file = "/Users/yev.vlasenko2/Projects/vue/vue-js-modal/src/Modal.vue", 
-        Component.esModule && Object.keys(Component.esModule).some(function(key) {
+        Component.options.__file = "D:\\Projects\\vue\\vue-js-modal\\src\\Modal.vue", Component.esModule && Object.keys(Component.esModule).some(function(key) {
             return "default" !== key && "__esModule" !== key;
         }) && console.error("named exports are not supported in *.vue files."), Component.options.functional && console.error("[vue-loader] Modal.vue: functional components are not supported with templates, they should use render functions."), 
         module.exports = Component.exports;
@@ -349,6 +347,14 @@
                         return value >= 0;
                     }
                 },
+                maxWidth: {
+                    type: Number,
+                    default: 1 / 0
+                },
+                maxHeight: {
+                    type: Number,
+                    default: 1 / 0
+                },
                 width: {
                     type: [ Number, String ],
                     default: 600,
@@ -467,12 +473,14 @@
                     };
                 },
                 trueModalWidth: function() {
-                    var window = this.window, modal = this.modal, adaptive = this.adaptive, minWidth = this.minWidth, value = "%" === modal.widthType ? window.width / 100 * modal.width : modal.width;
-                    return adaptive ? (0, _util.inRange)(minWidth, window.width, value) : value;
+                    var window = this.window, modal = this.modal, adaptive = this.adaptive, minWidth = this.minWidth, maxWidth = this.maxWidth, value = "%" === modal.widthType ? window.width / 100 * modal.width : modal.width, max = Math.min(window.width, maxWidth);
+                    return adaptive ? (0, _util.inRange)(minWidth, max, value) : value;
                 },
                 trueModalHeight: function() {
-                    var window = this.window, modal = this.modal, isAutoHeight = this.isAutoHeight, adaptive = this.adaptive, value = "%" === modal.heightType ? window.height / 100 * modal.height : modal.height;
-                    return isAutoHeight ? this.modal.renderedHeight : adaptive ? (0, _util.inRange)(this.minHeight, this.window.height, value) : value;
+                    var window = this.window, modal = this.modal, isAutoHeight = this.isAutoHeight, adaptive = this.adaptive, maxHeight = this.maxHeight, value = "%" === modal.heightType ? window.height / 100 * modal.height : modal.height;
+                    if (isAutoHeight) return this.modal.renderedHeight;
+                    var max = Math.min(window.height, maxHeight);
+                    return adaptive ? (0, _util.inRange)(this.minHeight, max, value) : value;
                 },
                 overlayClass: function() {
                     return {
@@ -523,17 +531,20 @@
                     this.$emit("resize", resizeEvent);
                 },
                 toggle: function(state, params) {
-                    var reset = this.reset, scrollable = this.scrollable, visible = this.visible, beforeEventName = visible ? "before-close" : "before-open";
-                    "before-open" === beforeEventName ? (document.activeElement && document.activeElement.blur(), 
-                    reset && (this.setInitialSize(), this.shift.left = 0, this.shift.top = 0), scrollable && document.body.classList.add("v--modal-block-scroll")) : scrollable && document.body.classList.remove("v--modal-block-scroll");
-                    var stopEventExecution = !1, stop = function() {
-                        stopEventExecution = !0;
-                    }, beforeEvent = this.genEventObject({
-                        stop: stop,
-                        state: state,
-                        params: params
-                    });
-                    this.$emit(beforeEventName, beforeEvent), stopEventExecution || (this.visible = state);
+                    var reset = this.reset, scrollable = this.scrollable, visible = this.visible;
+                    if (visible !== state) {
+                        var beforeEventName = visible ? "before-close" : "before-open";
+                        "before-open" === beforeEventName ? (document.activeElement && document.activeElement.blur(), 
+                        reset && (this.setInitialSize(), this.shift.left = 0, this.shift.top = 0), scrollable && document.body.classList.add("v--modal-block-scroll")) : scrollable && document.body.classList.remove("v--modal-block-scroll");
+                        var stopEventExecution = !1, stop = function() {
+                            stopEventExecution = !0;
+                        }, beforeEvent = this.genEventObject({
+                            stop: stop,
+                            state: state,
+                            params: params
+                        });
+                        this.$emit(beforeEventName, beforeEvent), stopEventExecution || (this.visible = state);
+                    }
                 },
                 getDraggableElement: function() {
                     var selector = "string" != typeof this.draggable ? ".v--modal-box" : this.draggable;
@@ -716,15 +727,15 @@
         };
         exports.default = parse;
     }, function(module, exports, __webpack_require__) {
-        exports = module.exports = __webpack_require__(0)(), exports.push([ module.i, "\n.vue-dialog div {\n  box-sizing: border-box;\n}\n.vue-dialog .dialog-flex {\n  width: 100%;\n  height: 100%;\n}\n.vue-dialog .dialog-content {\n  flex: 1 0 auto;\n  width: 100%;\n  padding: 15px;\n  font-size: 14px;\n}\n.vue-dialog .dialog-c-title {\n  font-weight: 600;\n  padding-bottom: 15px;\n}\n.vue-dialog .dialog-c-text {\n}\n.vue-dialog .vue-dialog-buttons {\n  display: flex;\n  flex: 0 1 auto;\n  width: 100%;\n  border-top: 1px solid #eee;\n}\n.vue-dialog .vue-dialog-buttons-none {\n  width: 100%;\n  padding-bottom: 15px;\n}\n.vue-dialog-button {\n  font-size: 12px !important;\n  background: transparent;\n  padding: 0;\n  margin: 0;\n  border: 0;\n  cursor: pointer;\n  box-sizing: border-box;\n  line-height: 40px;\n  height: 40px;\n  color: inherit;\n  font: inherit;\n  outline: none;\n}\n.vue-dialog-button:hover {\n  background: rgba(0, 0, 0, 0.01);\n}\n.vue-dialog-button:active {\n  background: rgba(0, 0, 0, 0.025);\n}\n.vue-dialog-button:not(:first-of-type) {\n  border-left: 1px solid #eee;\n}\n", "" ]);
+        exports = module.exports = __webpack_require__(0)(), exports.push([ module.i, "\n.vue-dialog div {\r\n  box-sizing: border-box;\n}\n.vue-dialog .dialog-flex {\r\n  width: 100%;\r\n  height: 100%;\n}\n.vue-dialog .dialog-content {\r\n  flex: 1 0 auto;\r\n  width: 100%;\r\n  padding: 15px;\r\n  font-size: 14px;\n}\n.vue-dialog .dialog-c-title {\r\n  font-weight: 600;\r\n  padding-bottom: 15px;\n}\n.vue-dialog .dialog-c-text {\n}\n.vue-dialog .vue-dialog-buttons {\r\n  display: flex;\r\n  flex: 0 1 auto;\r\n  width: 100%;\r\n  border-top: 1px solid #eee;\n}\n.vue-dialog .vue-dialog-buttons-none {\r\n  width: 100%;\r\n  padding-bottom: 15px;\n}\n.vue-dialog-button {\r\n  font-size: 12px !important;\r\n  background: transparent;\r\n  padding: 0;\r\n  margin: 0;\r\n  border: 0;\r\n  cursor: pointer;\r\n  box-sizing: border-box;\r\n  line-height: 40px;\r\n  height: 40px;\r\n  color: inherit;\r\n  font: inherit;\r\n  outline: none;\n}\n.vue-dialog-button:hover {\r\n  background: rgba(0, 0, 0, 0.01);\n}\n.vue-dialog-button:active {\r\n  background: rgba(0, 0, 0, 0.025);\n}\n.vue-dialog-button:not(:first-of-type) {\r\n  border-left: 1px solid #eee;\n}\r\n", "" ]);
     }, function(module, exports, __webpack_require__) {
-        exports = module.exports = __webpack_require__(0)(), exports.push([ module.i, "\n.v--modal-block-scroll {\n  overflow: hidden;\n  position: fixed;\n  width: 100vw;\n}\n.v--modal-overlay {\n  position: fixed;\n  box-sizing: border-box;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100vh;\n  background: rgba(0, 0, 0, 0.2);\n  z-index: 999;\n  opacity: 1;\n}\n.v--modal-overlay.scrollable {\n  height: 100%;\n  min-height: 100vh;\n  overflow-y: auto;\n  padding-bottom: 10px;\n  -webkit-overflow-scrolling: touch;\n}\n.v--modal-overlay .v--modal-box {\n  position: relative;\n  overflow: hidden;\n  box-sizing: border-box;\n}\n.v--modal-overlay.scrollable .v--modal-box {\n  margin-bottom: 2px;\n  /* transition: top 0.2s ease; */\n}\n.v--modal {\n  background-color: white;\n  text-align: left;\n  border-radius: 3px;\n  box-shadow: 0 20px 60px -2px rgba(27, 33, 58, 0.4);\n  padding: 0;\n}\n.v--modal.v--modal-fullscreen {\n  width: 100vw;\n  height: 100vh;\n  margin: 0;\n  left: 0;\n  top: 0;\n}\n.v--modal-top-right {\n  display: block;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n.overlay-fade-enter-active,\n.overlay-fade-leave-active {\n  transition: all 0.2s;\n}\n.overlay-fade-enter,\n.overlay-fade-leave-active {\n  opacity: 0;\n}\n.nice-modal-fade-enter-active,\n.nice-modal-fade-leave-active {\n  transition: all 0.4s;\n}\n.nice-modal-fade-enter,\n.nice-modal-fade-leave-active {\n  opacity: 0;\n  transform: translateY(-20px);\n}\n", "" ]);
+        exports = module.exports = __webpack_require__(0)(), exports.push([ module.i, "\n.v--modal-block-scroll {\r\n  position: absolute;\r\n  overflow: hidden;\r\n  width: 100vw;\n}\n.v--modal-overlay {\r\n  position: fixed;\r\n  box-sizing: border-box;\r\n  left: 0;\r\n  top: 0;\r\n  width: 100%;\r\n  height: 100vh;\r\n  background: rgba(0, 0, 0, 0.2);\r\n  z-index: 999;\r\n  opacity: 1;\n}\n.v--modal-overlay.scrollable {\r\n  height: 100%;\r\n  min-height: 100vh;\r\n  overflow-y: auto;\r\n  padding-bottom: 10px;\r\n  -webkit-overflow-scrolling: touch;\n}\n.v--modal-overlay .v--modal-box {\r\n  position: relative;\r\n  overflow: hidden;\r\n  box-sizing: border-box;\n}\n.v--modal-overlay.scrollable .v--modal-box {\r\n  margin-bottom: 2px;\r\n  /* transition: top 0.2s ease; */\n}\n.v--modal {\r\n  background-color: white;\r\n  text-align: left;\r\n  border-radius: 3px;\r\n  box-shadow: 0 20px 60px -2px rgba(27, 33, 58, 0.4);\r\n  padding: 0;\n}\n.v--modal.v--modal-fullscreen {\r\n  width: 100vw;\r\n  height: 100vh;\r\n  margin: 0;\r\n  left: 0;\r\n  top: 0;\n}\n.v--modal-top-right {\r\n  display: block;\r\n  position: absolute;\r\n  right: 0;\r\n  top: 0;\n}\n.overlay-fade-enter-active,\r\n.overlay-fade-leave-active {\r\n  transition: all 0.2s;\n}\n.overlay-fade-enter,\r\n.overlay-fade-leave-active {\r\n  opacity: 0;\n}\n.nice-modal-fade-enter-active,\r\n.nice-modal-fade-leave-active {\r\n  transition: all 0.4s;\n}\n.nice-modal-fade-enter,\r\n.nice-modal-fade-leave-active {\r\n  opacity: 0;\r\n  transform: translateY(-20px);\n}\r\n", "" ]);
     }, function(module, exports, __webpack_require__) {
-        exports = module.exports = __webpack_require__(0)(), exports.push([ module.i, "\n.vue-modal-resizer {\n  display: block;\n  overflow: hidden;\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  right: 0;\n  bottom: 0;\n  z-index: 9999999;\n  background: transparent;\n  cursor: se-resize;\n}\n.vue-modal-resizer::after {\n  display: block;\n  position: absolute;\n  content: '';\n  background: transparent;\n  left: 0;\n  top: 0;\n  width: 0;\n  height: 0;\n  border-bottom: 10px solid #ddd;\n  border-left: 10px solid transparent;\n}\n.vue-modal-resizer.clicked::after {\n  border-bottom: 10px solid #369be9;\n}\n", "" ]);
+        exports = module.exports = __webpack_require__(0)(), exports.push([ module.i, "\n.vue-modal-resizer {\r\n  display: block;\r\n  overflow: hidden;\r\n  position: absolute;\r\n  width: 12px;\r\n  height: 12px;\r\n  right: 0;\r\n  bottom: 0;\r\n  z-index: 9999999;\r\n  background: transparent;\r\n  cursor: se-resize;\n}\n.vue-modal-resizer::after {\r\n  display: block;\r\n  position: absolute;\r\n  content: '';\r\n  background: transparent;\r\n  left: 0;\r\n  top: 0;\r\n  width: 0;\r\n  height: 0;\r\n  border-bottom: 10px solid #ddd;\r\n  border-left: 10px solid transparent;\n}\n.vue-modal-resizer.clicked::after {\r\n  border-bottom: 10px solid #369be9;\n}\r\n", "" ]);
     }, function(module, exports, __webpack_require__) {
         __webpack_require__(20);
         var Component = __webpack_require__(1)(__webpack_require__(9), __webpack_require__(17), null, null);
-        Component.options.__file = "/Users/yev.vlasenko2/Projects/vue/vue-js-modal/src/Resizer.vue", 
+        Component.options.__file = "D:\\Projects\\vue\\vue-js-modal\\src\\Resizer.vue", 
         Component.esModule && Object.keys(Component.esModule).some(function(key) {
             return "default" !== key && "__esModule" !== key;
         }) && console.error("named exports are not supported in *.vue files."), Component.options.functional && console.error("[vue-loader] Resizer.vue: functional components are not supported with templates, they should use render functions."), 
@@ -773,6 +784,9 @@
                         key: i,
                         class: button.class || "vue-dialog-button",
                         style: _vm.buttonStyle,
+                        attrs: {
+                            type: "button"
+                        },
                         domProps: {
                             innerHTML: _vm._s(button.title)
                         },
diff --git a/dist/ssr.index.js b/dist/ssr.index.js
index 93b4c5c..4eeb526 100644
--- a/dist/ssr.index.js
+++ b/dist/ssr.index.js
@@ -161,16 +161,14 @@
     }, function(module, exports, __webpack_require__) {
         __webpack_require__(18);
         var Component = __webpack_require__(1)(__webpack_require__(7), __webpack_require__(15), null, null);
-        Component.options.__file = "/Users/yev.vlasenko2/Projects/vue/vue-js-modal/src/Dialog.vue", 
-        Component.esModule && Object.keys(Component.esModule).some(function(key) {
+        Component.options.__file = "D:\\Projects\\vue\\vue-js-modal\\src\\Dialog.vue", Component.esModule && Object.keys(Component.esModule).some(function(key) {
             return "default" !== key && "__esModule" !== key;
         }) && console.error("named exports are not supported in *.vue files."), Component.options.functional && console.error("[vue-loader] Dialog.vue: functional components are not supported with templates, they should use render functions."), 
         module.exports = Component.exports;
     }, function(module, exports, __webpack_require__) {
         __webpack_require__(19);
         var Component = __webpack_require__(1)(__webpack_require__(8), __webpack_require__(16), null, null);
-        Component.options.__file = "/Users/yev.vlasenko2/Projects/vue/vue-js-modal/src/Modal.vue", 
-        Component.esModule && Object.keys(Component.esModule).some(function(key) {
+        Component.options.__file = "D:\\Projects\\vue\\vue-js-modal\\src\\Modal.vue", Component.esModule && Object.keys(Component.esModule).some(function(key) {
             return "default" !== key && "__esModule" !== key;
         }) && console.error("named exports are not supported in *.vue files."), Component.options.functional && console.error("[vue-loader] Modal.vue: functional components are not supported with templates, they should use render functions."), 
         module.exports = Component.exports;
@@ -303,6 +301,14 @@
                         return value >= 0;
                     }
                 },
+                maxWidth: {
+                    type: Number,
+                    default: 1 / 0
+                },
+                maxHeight: {
+                    type: Number,
+                    default: 1 / 0
+                },
                 width: {
                     type: [ Number, String ],
                     default: 600,
@@ -421,12 +427,14 @@
                     };
                 },
                 trueModalWidth: function() {
-                    var window = this.window, modal = this.modal, adaptive = this.adaptive, minWidth = this.minWidth, value = "%" === modal.widthType ? window.width / 100 * modal.width : modal.width;
-                    return adaptive ? (0, _util.inRange)(minWidth, window.width, value) : value;
+                    var window = this.window, modal = this.modal, adaptive = this.adaptive, minWidth = this.minWidth, maxWidth = this.maxWidth, value = "%" === modal.widthType ? window.width / 100 * modal.width : modal.width, max = Math.min(window.width, maxWidth);
+                    return adaptive ? (0, _util.inRange)(minWidth, max, value) : value;
                 },
                 trueModalHeight: function() {
-                    var window = this.window, modal = this.modal, isAutoHeight = this.isAutoHeight, adaptive = this.adaptive, value = "%" === modal.heightType ? window.height / 100 * modal.height : modal.height;
-                    return isAutoHeight ? this.modal.renderedHeight : adaptive ? (0, _util.inRange)(this.minHeight, this.window.height, value) : value;
+                    var window = this.window, modal = this.modal, isAutoHeight = this.isAutoHeight, adaptive = this.adaptive, maxHeight = this.maxHeight, value = "%" === modal.heightType ? window.height / 100 * modal.height : modal.height;
+                    if (isAutoHeight) return this.modal.renderedHeight;
+                    var max = Math.min(window.height, maxHeight);
+                    return adaptive ? (0, _util.inRange)(this.minHeight, max, value) : value;
                 },
                 overlayClass: function() {
                     return {
@@ -477,17 +485,20 @@
                     this.$emit("resize", resizeEvent);
                 },
                 toggle: function(state, params) {
-                    var reset = this.reset, scrollable = this.scrollable, visible = this.visible, beforeEventName = visible ? "before-close" : "before-open";
-                    "before-open" === beforeEventName ? (document.activeElement && document.activeElement.blur(), 
-                    reset && (this.setInitialSize(), this.shift.left = 0, this.shift.top = 0), scrollable && document.body.classList.add("v--modal-block-scroll")) : scrollable && document.body.classList.remove("v--modal-block-scroll");
-                    var stopEventExecution = !1, stop = function() {
-                        stopEventExecution = !0;
-                    }, beforeEvent = this.genEventObject({
-                        stop: stop,
-                        state: state,
-                        params: params
-                    });
-                    this.$emit(beforeEventName, beforeEvent), stopEventExecution || (this.visible = state);
+                    var reset = this.reset, scrollable = this.scrollable, visible = this.visible;
+                    if (visible !== state) {
+                        var beforeEventName = visible ? "before-close" : "before-open";
+                        "before-open" === beforeEventName ? (document.activeElement && document.activeElement.blur(), 
+                        reset && (this.setInitialSize(), this.shift.left = 0, this.shift.top = 0), scrollable && document.body.classList.add("v--modal-block-scroll")) : scrollable && document.body.classList.remove("v--modal-block-scroll");
+                        var stopEventExecution = !1, stop = function() {
+                            stopEventExecution = !0;
+                        }, beforeEvent = this.genEventObject({
+                            stop: stop,
+                            state: state,
+                            params: params
+                        });
+                        this.$emit(beforeEventName, beforeEvent), stopEventExecution || (this.visible = state);
+                    }
                 },
                 getDraggableElement: function() {
                     var selector = "string" != typeof this.draggable ? ".v--modal-box" : this.draggable;
@@ -670,15 +681,15 @@
         };
         exports.default = parse;
     }, function(module, exports, __webpack_require__) {
-        exports = module.exports = __webpack_require__(0)(), exports.push([ module.i, "\n.vue-dialog div {\n  box-sizing: border-box;\n}\n.vue-dialog .dialog-flex {\n  width: 100%;\n  height: 100%;\n}\n.vue-dialog .dialog-content {\n  flex: 1 0 auto;\n  width: 100%;\n  padding: 15px;\n  font-size: 14px;\n}\n.vue-dialog .dialog-c-title {\n  font-weight: 600;\n  padding-bottom: 15px;\n}\n.vue-dialog .dialog-c-text {\n}\n.vue-dialog .vue-dialog-buttons {\n  display: flex;\n  flex: 0 1 auto;\n  width: 100%;\n  border-top: 1px solid #eee;\n}\n.vue-dialog .vue-dialog-buttons-none {\n  width: 100%;\n  padding-bottom: 15px;\n}\n.vue-dialog-button {\n  font-size: 12px !important;\n  background: transparent;\n  padding: 0;\n  margin: 0;\n  border: 0;\n  cursor: pointer;\n  box-sizing: border-box;\n  line-height: 40px;\n  height: 40px;\n  color: inherit;\n  font: inherit;\n  outline: none;\n}\n.vue-dialog-button:hover {\n  background: rgba(0, 0, 0, 0.01);\n}\n.vue-dialog-button:active {\n  background: rgba(0, 0, 0, 0.025);\n}\n.vue-dialog-button:not(:first-of-type) {\n  border-left: 1px solid #eee;\n}\n", "" ]);
+        exports = module.exports = __webpack_require__(0)(), exports.push([ module.i, "\n.vue-dialog div {\r\n  box-sizing: border-box;\n}\n.vue-dialog .dialog-flex {\r\n  width: 100%;\r\n  height: 100%;\n}\n.vue-dialog .dialog-content {\r\n  flex: 1 0 auto;\r\n  width: 100%;\r\n  padding: 15px;\r\n  font-size: 14px;\n}\n.vue-dialog .dialog-c-title {\r\n  font-weight: 600;\r\n  padding-bottom: 15px;\n}\n.vue-dialog .dialog-c-text {\n}\n.vue-dialog .vue-dialog-buttons {\r\n  display: flex;\r\n  flex: 0 1 auto;\r\n  width: 100%;\r\n  border-top: 1px solid #eee;\n}\n.vue-dialog .vue-dialog-buttons-none {\r\n  width: 100%;\r\n  padding-bottom: 15px;\n}\n.vue-dialog-button {\r\n  font-size: 12px !important;\r\n  background: transparent;\r\n  padding: 0;\r\n  margin: 0;\r\n  border: 0;\r\n  cursor: pointer;\r\n  box-sizing: border-box;\r\n  line-height: 40px;\r\n  height: 40px;\r\n  color: inherit;\r\n  font: inherit;\r\n  outline: none;\n}\n.vue-dialog-button:hover {\r\n  background: rgba(0, 0, 0, 0.01);\n}\n.vue-dialog-button:active {\r\n  background: rgba(0, 0, 0, 0.025);\n}\n.vue-dialog-button:not(:first-of-type) {\r\n  border-left: 1px solid #eee;\n}\r\n", "" ]);
     }, function(module, exports, __webpack_require__) {
-        exports = module.exports = __webpack_require__(0)(), exports.push([ module.i, "\n.v--modal-block-scroll {\n  overflow: hidden;\n  position: fixed;\n  width: 100vw;\n}\n.v--modal-overlay {\n  position: fixed;\n  box-sizing: border-box;\n  left: 0;\n  top: 0;\n  width: 100%;\n  height: 100vh;\n  background: rgba(0, 0, 0, 0.2);\n  z-index: 999;\n  opacity: 1;\n}\n.v--modal-overlay.scrollable {\n  height: 100%;\n  min-height: 100vh;\n  overflow-y: auto;\n  padding-bottom: 10px;\n  -webkit-overflow-scrolling: touch;\n}\n.v--modal-overlay .v--modal-box {\n  position: relative;\n  overflow: hidden;\n  box-sizing: border-box;\n}\n.v--modal-overlay.scrollable .v--modal-box {\n  margin-bottom: 2px;\n  /* transition: top 0.2s ease; */\n}\n.v--modal {\n  background-color: white;\n  text-align: left;\n  border-radius: 3px;\n  box-shadow: 0 20px 60px -2px rgba(27, 33, 58, 0.4);\n  padding: 0;\n}\n.v--modal.v--modal-fullscreen {\n  width: 100vw;\n  height: 100vh;\n  margin: 0;\n  left: 0;\n  top: 0;\n}\n.v--modal-top-right {\n  display: block;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n.overlay-fade-enter-active,\n.overlay-fade-leave-active {\n  transition: all 0.2s;\n}\n.overlay-fade-enter,\n.overlay-fade-leave-active {\n  opacity: 0;\n}\n.nice-modal-fade-enter-active,\n.nice-modal-fade-leave-active {\n  transition: all 0.4s;\n}\n.nice-modal-fade-enter,\n.nice-modal-fade-leave-active {\n  opacity: 0;\n  transform: translateY(-20px);\n}\n", "" ]);
+        exports = module.exports = __webpack_require__(0)(), exports.push([ module.i, "\n.v--modal-block-scroll {\r\n  position: absolute;\r\n  overflow: hidden;\r\n  width: 100vw;\n}\n.v--modal-overlay {\r\n  position: fixed;\r\n  box-sizing: border-box;\r\n  left: 0;\r\n  top: 0;\r\n  width: 100%;\r\n  height: 100vh;\r\n  background: rgba(0, 0, 0, 0.2);\r\n  z-index: 999;\r\n  opacity: 1;\n}\n.v--modal-overlay.scrollable {\r\n  height: 100%;\r\n  min-height: 100vh;\r\n  overflow-y: auto;\r\n  padding-bottom: 10px;\r\n  -webkit-overflow-scrolling: touch;\n}\n.v--modal-overlay .v--modal-box {\r\n  position: relative;\r\n  overflow: hidden;\r\n  box-sizing: border-box;\n}\n.v--modal-overlay.scrollable .v--modal-box {\r\n  margin-bottom: 2px;\r\n  /* transition: top 0.2s ease; */\n}\n.v--modal {\r\n  background-color: white;\r\n  text-align: left;\r\n  border-radius: 3px;\r\n  box-shadow: 0 20px 60px -2px rgba(27, 33, 58, 0.4);\r\n  padding: 0;\n}\n.v--modal.v--modal-fullscreen {\r\n  width: 100vw;\r\n  height: 100vh;\r\n  margin: 0;\r\n  left: 0;\r\n  top: 0;\n}\n.v--modal-top-right {\r\n  display: block;\r\n  position: absolute;\r\n  right: 0;\r\n  top: 0;\n}\n.overlay-fade-enter-active,\r\n.overlay-fade-leave-active {\r\n  transition: all 0.2s;\n}\n.overlay-fade-enter,\r\n.overlay-fade-leave-active {\r\n  opacity: 0;\n}\n.nice-modal-fade-enter-active,\r\n.nice-modal-fade-leave-active {\r\n  transition: all 0.4s;\n}\n.nice-modal-fade-enter,\r\n.nice-modal-fade-leave-active {\r\n  opacity: 0;\r\n  transform: translateY(-20px);\n}\r\n", "" ]);
     }, function(module, exports, __webpack_require__) {
-        exports = module.exports = __webpack_require__(0)(), exports.push([ module.i, "\n.vue-modal-resizer {\n  display: block;\n  overflow: hidden;\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  right: 0;\n  bottom: 0;\n  z-index: 9999999;\n  background: transparent;\n  cursor: se-resize;\n}\n.vue-modal-resizer::after {\n  display: block;\n  position: absolute;\n  content: '';\n  background: transparent;\n  left: 0;\n  top: 0;\n  width: 0;\n  height: 0;\n  border-bottom: 10px solid #ddd;\n  border-left: 10px solid transparent;\n}\n.vue-modal-resizer.clicked::after {\n  border-bottom: 10px solid #369be9;\n}\n", "" ]);
+        exports = module.exports = __webpack_require__(0)(), exports.push([ module.i, "\n.vue-modal-resizer {\r\n  display: block;\r\n  overflow: hidden;\r\n  position: absolute;\r\n  width: 12px;\r\n  height: 12px;\r\n  right: 0;\r\n  bottom: 0;\r\n  z-index: 9999999;\r\n  background: transparent;\r\n  cursor: se-resize;\n}\n.vue-modal-resizer::after {\r\n  display: block;\r\n  position: absolute;\r\n  content: '';\r\n  background: transparent;\r\n  left: 0;\r\n  top: 0;\r\n  width: 0;\r\n  height: 0;\r\n  border-bottom: 10px solid #ddd;\r\n  border-left: 10px solid transparent;\n}\n.vue-modal-resizer.clicked::after {\r\n  border-bottom: 10px solid #369be9;\n}\r\n", "" ]);
     }, function(module, exports, __webpack_require__) {
         __webpack_require__(20);
         var Component = __webpack_require__(1)(__webpack_require__(9), __webpack_require__(17), null, null);
-        Component.options.__file = "/Users/yev.vlasenko2/Projects/vue/vue-js-modal/src/Resizer.vue", 
+        Component.options.__file = "D:\\Projects\\vue\\vue-js-modal\\src\\Resizer.vue", 
         Component.esModule && Object.keys(Component.esModule).some(function(key) {
             return "default" !== key && "__esModule" !== key;
         }) && console.error("named exports are not supported in *.vue files."), Component.options.functional && console.error("[vue-loader] Resizer.vue: functional components are not supported with templates, they should use render functions."), 
@@ -727,6 +738,9 @@
                         key: i,
                         class: button.class || "vue-dialog-button",
                         style: _vm.buttonStyle,
+                        attrs: {
+                            type: "button"
+                        },
                         domProps: {
                             innerHTML: _vm._s(button.title)
                         },
diff --git a/dist/ssr.nocss.js b/dist/ssr.nocss.js
index 7069180..9210023 100644
--- a/dist/ssr.nocss.js
+++ b/dist/ssr.nocss.js
@@ -98,16 +98,14 @@
     }, function(module, exports, __webpack_require__) {
         __webpack_require__(9);
         var Component = __webpack_require__(0)(__webpack_require__(5), __webpack_require__(13), null, null);
-        Component.options.__file = "/Users/yev.vlasenko2/Projects/vue/vue-js-modal/src/Dialog.vue", 
-        Component.esModule && Object.keys(Component.esModule).some(function(key) {
+        Component.options.__file = "D:\\Projects\\vue\\vue-js-modal\\src\\Dialog.vue", Component.esModule && Object.keys(Component.esModule).some(function(key) {
             return "default" !== key && "__esModule" !== key;
         }) && console.error("named exports are not supported in *.vue files."), Component.options.functional && console.error("[vue-loader] Dialog.vue: functional components are not supported with templates, they should use render functions."), 
         module.exports = Component.exports;
     }, function(module, exports, __webpack_require__) {
         __webpack_require__(10);
         var Component = __webpack_require__(0)(__webpack_require__(6), __webpack_require__(14), null, null);
-        Component.options.__file = "/Users/yev.vlasenko2/Projects/vue/vue-js-modal/src/Modal.vue", 
-        Component.esModule && Object.keys(Component.esModule).some(function(key) {
+        Component.options.__file = "D:\\Projects\\vue\\vue-js-modal\\src\\Modal.vue", Component.esModule && Object.keys(Component.esModule).some(function(key) {
             return "default" !== key && "__esModule" !== key;
         }) && console.error("named exports are not supported in *.vue files."), Component.options.functional && console.error("[vue-loader] Modal.vue: functional components are not supported with templates, they should use render functions."), 
         module.exports = Component.exports;
@@ -240,6 +238,14 @@
                         return value >= 0;
                     }
                 },
+                maxWidth: {
+                    type: Number,
+                    default: 1 / 0
+                },
+                maxHeight: {
+                    type: Number,
+                    default: 1 / 0
+                },
                 width: {
                     type: [ Number, String ],
                     default: 600,
@@ -358,12 +364,14 @@
                     };
                 },
                 trueModalWidth: function() {
-                    var window = this.window, modal = this.modal, adaptive = this.adaptive, minWidth = this.minWidth, value = "%" === modal.widthType ? window.width / 100 * modal.width : modal.width;
-                    return adaptive ? (0, _util.inRange)(minWidth, window.width, value) : value;
+                    var window = this.window, modal = this.modal, adaptive = this.adaptive, minWidth = this.minWidth, maxWidth = this.maxWidth, value = "%" === modal.widthType ? window.width / 100 * modal.width : modal.width, max = Math.min(window.width, maxWidth);
+                    return adaptive ? (0, _util.inRange)(minWidth, max, value) : value;
                 },
                 trueModalHeight: function() {
-                    var window = this.window, modal = this.modal, isAutoHeight = this.isAutoHeight, adaptive = this.adaptive, value = "%" === modal.heightType ? window.height / 100 * modal.height : modal.height;
-                    return isAutoHeight ? this.modal.renderedHeight : adaptive ? (0, _util.inRange)(this.minHeight, this.window.height, value) : value;
+                    var window = this.window, modal = this.modal, isAutoHeight = this.isAutoHeight, adaptive = this.adaptive, maxHeight = this.maxHeight, value = "%" === modal.heightType ? window.height / 100 * modal.height : modal.height;
+                    if (isAutoHeight) return this.modal.renderedHeight;
+                    var max = Math.min(window.height, maxHeight);
+                    return adaptive ? (0, _util.inRange)(this.minHeight, max, value) : value;
                 },
                 overlayClass: function() {
                     return {
@@ -414,17 +422,20 @@
                     this.$emit("resize", resizeEvent);
                 },
                 toggle: function(state, params) {
-                    var reset = this.reset, scrollable = this.scrollable, visible = this.visible, beforeEventName = visible ? "before-close" : "before-open";
-                    "before-open" === beforeEventName ? (document.activeElement && document.activeElement.blur(), 
-                    reset && (this.setInitialSize(), this.shift.left = 0, this.shift.top = 0), scrollable && document.body.classList.add("v--modal-block-scroll")) : scrollable && document.body.classList.remove("v--modal-block-scroll");
-                    var stopEventExecution = !1, stop = function() {
-                        stopEventExecution = !0;
-                    }, beforeEvent = this.genEventObject({
-                        stop: stop,
-                        state: state,
-                        params: params
-                    });
-                    this.$emit(beforeEventName, beforeEvent), stopEventExecution || (this.visible = state);
+                    var reset = this.reset, scrollable = this.scrollable, visible = this.visible;
+                    if (visible !== state) {
+                        var beforeEventName = visible ? "before-close" : "before-open";
+                        "before-open" === beforeEventName ? (document.activeElement && document.activeElement.blur(), 
+                        reset && (this.setInitialSize(), this.shift.left = 0, this.shift.top = 0), scrollable && document.body.classList.add("v--modal-block-scroll")) : scrollable && document.body.classList.remove("v--modal-block-scroll");
+                        var stopEventExecution = !1, stop = function() {
+                            stopEventExecution = !0;
+                        }, beforeEvent = this.genEventObject({
+                            stop: stop,
+                            state: state,
+                            params: params
+                        });
+                        this.$emit(beforeEventName, beforeEvent), stopEventExecution || (this.visible = state);
+                    }
                 },
                 getDraggableElement: function() {
                     var selector = "string" != typeof this.draggable ? ".v--modal-box" : this.draggable;
@@ -609,7 +620,7 @@
     }, function(module, exports) {}, function(module, exports) {}, function(module, exports) {}, function(module, exports, __webpack_require__) {
         __webpack_require__(11);
         var Component = __webpack_require__(0)(__webpack_require__(7), __webpack_require__(15), null, null);
-        Component.options.__file = "/Users/yev.vlasenko2/Projects/vue/vue-js-modal/src/Resizer.vue", 
+        Component.options.__file = "D:\\Projects\\vue\\vue-js-modal\\src\\Resizer.vue", 
         Component.esModule && Object.keys(Component.esModule).some(function(key) {
             return "default" !== key && "__esModule" !== key;
         }) && console.error("named exports are not supported in *.vue files."), Component.options.functional && console.error("[vue-loader] Resizer.vue: functional components are not supported with templates, they should use render functions."), 
@@ -658,6 +669,9 @@
                         key: i,
                         class: button.class || "vue-dialog-button",
                         style: _vm.buttonStyle,
+                        attrs: {
+                            type: "button"
+                        },
                         domProps: {
                             innerHTML: _vm._s(button.title)
                         },
diff --git a/dist/styles.css b/dist/styles.css
index 3ad389e..caa5d53 100644
--- a/dist/styles.css
+++ b/dist/styles.css
@@ -1,7 +1,7 @@
 
 .v--modal-block-scroll {
+  position: absolute;
   overflow: hidden;
-  position: fixed;
   width: 100vw;
 }
 .v--modal-overlay {
diff --git a/package.json b/package.json
index 8268aba..b4e2df5 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-js-modal",
   "description": "Modal Component for Vue.js",
-  "version": "1.3.7",
+  "version": "1.3.10",
   "author": "euvl <yev.vlasenko@gmail.com>",
   "main": "dist/index.js",
   "repository": {
@@ -19,16 +19,14 @@
     "url": "https://github.com/euvl/vue-js-modal/issues"
   },
   "scripts": {
-    "build:client":
-      "webpack --config ./build/webpack.client.config.js --progress --hide-modules",
-    "build:ssr":
-      "webpack --config ./build/webpack.ssr.config.js --progress --hide-modules",
-    "build:ssr-no-css":
-      "webpack --config ./build/webpack.ssr-no-css.config.js --progress --hide-modules",
+    "build:client": "webpack --config ./build/webpack.client.config.js --progress --hide-modules",
+    "build:ssr": "webpack --config ./build/webpack.ssr.config.js --progress --hide-modules",
+    "build:ssr-no-css": "webpack --config ./build/webpack.ssr-no-css.config.js --progress --hide-modules",
     "lint": "eslint --ext .js,.vue src test/unit/specs",
     "unit": "./node_modules/karma/bin/karma start test/unit/karma.conf.js",
     "build":
       "npm run unit && npm run build:client && npm run build:ssr && npm run build:ssr-no-css",
+    "watch": "webpack --config ./build/webpack.client.config.js --progress --hide-modules --watch",
     "test:types": "tsc -p types/test"
   },
   "license": "MIT",
diff --git a/src/Dialog.vue b/src/Dialog.vue
index c288b3d..3d40c6e 100644
--- a/src/Dialog.vue
+++ b/src/Dialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <modal 
+  <modal
     name="dialog"
     height="auto"
     :classes="['v--modal', 'vue-dialog', this.params.class]"
@@ -24,9 +24,10 @@
     <div
       class="vue-dialog-buttons"
       v-if="buttons">
-      <button 
+      <button
         v-for="(button, i) in buttons"
         :class="button.class || 'vue-dialog-button'"
+        type="button"
         :style="buttonStyle"
         :key="i"
         v-html="button.title"
@@ -54,40 +55,40 @@ export default {
       default: 'fade'
     }
   },
-  data() {
+  data () {
     return {
       params: {},
       defaultButtons: [{ title: 'CLOSE' }]
     }
   },
   computed: {
-    buttons() {
+    buttons () {
       return this.params.buttons || this.defaultButtons
     },
     /**
       * Returns FLEX style with correct width for arbitrary number of
       * buttons.
       */
-    buttonStyle() {
+    buttonStyle () {
       return {
         flex: `1 1 ${100 / this.buttons.length}%`
       }
     }
   },
   methods: {
-    beforeOpened(event) {
+    beforeOpened (event) {
       window.addEventListener('keyup', this.onKeyUp)
 
       this.params = event.params || {}
       this.$emit('before-opened', event)
     },
-    beforeClosed(event) {
+    beforeClosed (event) {
       window.removeEventListener('keyup', this.onKeyUp)
 
       this.params = {}
       this.$emit('before-closed', event)
     },
-    click(i, event, source = 'click') {
+    click (i, event, source = 'click') {
       const button = this.buttons[i]
 
       if (button && typeof button.handler === 'function') {
@@ -96,7 +97,7 @@ export default {
         this.$modal.hide('dialog')
       }
     },
-    onKeyUp(event) {
+    onKeyUp (event) {
       if (event.which === 13 && this.buttons.length > 0) {
         const buttonIndex =
           this.buttons.length === 1
diff --git a/src/Modal.vue b/src/Modal.vue
index 69607cb..64be4f2 100644
--- a/src/Modal.vue
+++ b/src/Modal.vue
@@ -78,21 +78,29 @@ export default {
     minWidth: {
       type: Number,
       default: 0,
-      validator(value) {
+      validator (value) {
         return value >= 0
       }
     },
     minHeight: {
       type: Number,
       default: 0,
-      validator(value) {
+      validator (value) {
         return value >= 0
       }
     },
+    maxWidth: {
+      type: Number,
+      default: Infinity
+    },
+    maxHeight: {
+      type: Number,
+      default: Infinity
+    },
     width: {
       type: [Number, String],
       default: 600,
-      validator(value) {
+      validator (value) {
         if (typeof value === 'string') {
           let width = parseNumber(value)
           return (width.type === '%' || width.type === 'px') && width.value > 0
@@ -104,7 +112,7 @@ export default {
     height: {
       type: [Number, String],
       default: 300,
-      validator(value) {
+      validator (value) {
         if (typeof value === 'string') {
           if (value === 'auto') {
             return true
@@ -122,14 +130,14 @@ export default {
     pivotX: {
       type: Number,
       default: 0.5,
-      validator(value) {
+      validator (value) {
         return value >= 0 && value <= 1
       }
     },
     pivotY: {
       type: Number,
       default: 0.5,
-      validator(value) {
+      validator (value) {
         return value >= 0 && value <= 1
       }
     }
@@ -137,7 +145,7 @@ export default {
   components: {
     Resizer
   },
-  data() {
+  data () {
     return {
       visible: false,
 
@@ -169,12 +177,12 @@ export default {
   },
   watch: {
     /**
-       * Sets the visibility of overlay and modal.
-       * Events 'opened' and 'closed' is called here
-       * inside `setTimeout` and `$nextTick`, after the DOM changes.
-       * This fixes `$refs.modal` `undefined` bug (fixes #15)
-       */
-    visible(value) {
+     * Sets the visibility of overlay and modal.
+     * Events 'opened' and 'closed' is called here
+     * inside `setTimeout` and `$nextTick`, after the DOM changes.
+     * This fixes `$refs.modal` `undefined` bug (fixes #15)
+     */
+    visible (value) {
       if (value) {
         this.visibility.overlay = true
 
@@ -198,13 +206,13 @@ export default {
       }
     }
   },
-  created() {
+  created () {
     this.setInitialSize()
   },
   /**
-     * Sets global listeners
-     */
-  beforeMount() {
+   * Sets global listeners
+   */
+  beforeMount () {
     Modal.event.$on('toggle', (name, state, params) => {
       if (name === this.name) {
         if (typeof state === 'undefined') {
@@ -218,8 +226,8 @@ export default {
     window.addEventListener('resize', this.onWindowResize)
     this.onWindowResize()
     /**
-       * Making sure that autoHeight is enabled when using "scrollable"
-       */
+     * Making sure that autoHeight is enabled when using "scrollable"
+     */
     if (this.scrollable && !this.isAutoHeight) {
       console.warn(
         `Modal "${this.name}" has scrollable flag set to true ` +
@@ -227,19 +235,19 @@ export default {
       )
     }
     /**
-       * Only observe when using height: 'auto'
-       * The callback will be called when modal DOM changes,
-       * this is for updating the `top` attribute for height 'auto' modals.
-       */
+     * Only observe when using height: 'auto'
+     * The callback will be called when modal DOM changes,
+     * this is for updating the `top` attribute for height 'auto' modals.
+     */
     if (this.isAutoHeight) {
       /**
-         * MutationObserver feature detection:
-         * Detects if MutationObserver is available, return false if not.
-         * No polyfill is provided here, so height 'auto' recalculation will
-         * simply stay at its initial height (won't crash).
-         * (Provide polyfill to support IE < 11)
-         */
-      const MutationObserver = (function() {
+       * MutationObserver feature detection:
+       * Detects if MutationObserver is available, return false if not.
+       * No polyfill is provided here, so height 'auto' recalculation will
+       * simply stay at its initial height (won't crash).
+       * (Provide polyfill to support IE < 11)
+       */
+      const MutationObserver = (function () {
         const prefixes = ['', 'WebKit', 'Moz', 'O', 'Ms']
 
         for (let i = 0; i < prefixes.length; i++) {
@@ -264,9 +272,9 @@ export default {
     }
   },
   /**
-     * Removes "resize" window listener
-     */
-  beforeDestroy() {
+   * Removes "resize" window listener
+   */
+  beforeDestroy () {
     window.removeEventListener('resize', this.onWindowResize)
 
     if (this.clickToClose) {
@@ -275,16 +283,16 @@ export default {
   },
   computed: {
     /**
-       * Returns true if height is set to "auto"
-       */
-    isAutoHeight() {
+     * Returns true if height is set to "auto"
+     */
+    isAutoHeight () {
       return this.modal.heightType === 'auto'
     },
     /**
-       * Calculates and returns modal position based on the
-       * pivots, window size and modal size
-       */
-    position() {
+     * Calculates and returns modal position based on the
+     * pivots, window size and modal size
+     */
+    position () {
       const {
         window,
         shift,
@@ -306,25 +314,27 @@ export default {
       }
     },
     /**
-       * Returns pixel width (if set with %) and makes sure that modal size
-       * fits the window
-       */
-    trueModalWidth() {
-      const { window, modal, adaptive, minWidth } = this
+     * Returns pixel width (if set with %) and makes sure that modal size
+     * fits the window
+     */
+    trueModalWidth () {
+      const { window, modal, adaptive, minWidth, maxWidth } = this
 
       const value =
         modal.widthType === '%' ? window.width / 100 * modal.width : modal.width
 
-      return adaptive ? inRange(minWidth, window.width, value) : value
+      const max = Math.min(window.width, maxWidth)
+
+      return adaptive ? inRange(minWidth, max, value) : value
     },
     /**
-       * Returns pixel height (if set with %) and makes sure that modal size
-       * fits the window.
-       *
-       * Returns modal.renderedHeight if height set as "auto"
-       */
-    trueModalHeight() {
-      const { window, modal, isAutoHeight, adaptive } = this
+     * Returns pixel height (if set with %) and makes sure that modal size
+     * fits the window.
+     *
+     * Returns modal.renderedHeight if height set as "auto"
+     */
+    trueModalHeight () {
+      const { window, modal, isAutoHeight, adaptive, maxHeight } = this
 
       const value =
         modal.heightType === '%'
@@ -336,29 +346,29 @@ export default {
         return this.modal.renderedHeight
       }
 
-      return adaptive
-        ? inRange(this.minHeight, this.window.height, value)
-        : value
+      const max = Math.min(window.height, maxHeight)
+
+      return adaptive ? inRange(this.minHeight, max, value) : value
     },
     /**
-       * Returns class list for screen overlay (modal background)
-       */
-    overlayClass() {
+     * Returns class list for screen overlay (modal background)
+     */
+    overlayClass () {
       return {
         'v--modal-overlay': true,
         scrollable: this.scrollable && this.isAutoHeight
       }
     },
     /**
-       * Returns class list for modal itself
-       */
-    modalClass() {
+     * Returns class list for modal itself
+     */
+    modalClass () {
       return ['v--modal-box', this.classes]
     },
     /**
-       * CSS styles for position and size of the modal
-       */
-    modalStyle() {
+     * CSS styles for position and size of the modal
+     */
+    modalStyle () {
       return {
         top: this.position.top + 'px',
         left: this.position.left + 'px',
@@ -369,14 +379,14 @@ export default {
   },
   methods: {
     /**
-       * Initializes modal's size & position,
-       * if "reset" flag is set to true - this function will be called
-       * every time "beforeOpen" is triggered
-       */
-    setInitialSize() {
-      let { modal } = this
-      let width = parseNumber(this.width)
-      let height = parseNumber(this.height)
+     * Initializes modal's size & position,
+     * if "reset" flag is set to true - this function will be called
+     * every time "beforeOpen" is triggered
+     */
+    setInitialSize () {
+      const { modal } = this
+      const width = parseNumber(this.width)
+      const height = parseNumber(this.height)
 
       modal.width = width.value
       modal.widthType = width.type
@@ -384,22 +394,22 @@ export default {
       modal.heightType = height.type
     },
 
-    onEscapeKeyUp(event) {
+    onEscapeKeyUp (event) {
       if (event.which === 27 && this.visible) {
         this.$modal.hide(this.name)
       }
     },
 
-    onWindowResize() {
+    onWindowResize () {
       this.window.width = window.innerWidth
       this.window.height = window.innerHeight
     },
 
     /**
-       * Generates event object
-       */
-    genEventObject(params) {
-      var eventData = {
+     * Generates event object
+     */
+    genEventObject (params) {
+      const eventData = {
         name: this.name,
         timestamp: Date.now(),
         canceled: false,
@@ -409,9 +419,9 @@ export default {
       return Object.assign(eventData, params || {})
     },
     /**
-       * Event handler which is triggered on modal resize
-       */
-    onModalResize(event) {
+     * Event handler which is triggered on modal resize
+     */
+    onModalResize (event) {
       this.modal.widthType = 'px'
       this.modal.width = event.size.width
 
@@ -424,20 +434,20 @@ export default {
       this.$emit('resize', resizeEvent)
     },
     /**
-       * Event handler which is triggered on $modal.show and $modal.hight
-       * BeforeEvents: ('before-close' and 'before-open') are `$emit`ed here,
-       * but AfterEvents ('opened' and 'closed') are moved to `watch.visible`.
-       */
-    toggle(state, params) {
+     * Event handler which is triggered on $modal.show and $modal.hide
+     * BeforeEvents: ('before-close' and 'before-open') are `$emit`ed here,
+     * but AfterEvents ('opened' and 'closed') are moved to `watch.visible`.
+     */
+    toggle (state, params) {
       const { reset, scrollable, visible } = this
-
+      if (visible === state) return
       const beforeEventName = visible ? 'before-close' : 'before-open'
 
       if (beforeEventName === 'before-open') {
         /**
-           * Need to unfocus previously focused element, otherwise
-           * all keypress events (ESC press, for example) will trigger on that element.
-           */
+         * Need to unfocus previously focused element, otherwise
+         * all keypress events (ESC press, for example) will trigger on that element.
+         */
         if (document.activeElement) {
           document.activeElement.blur()
         }
@@ -474,27 +484,28 @@ export default {
       }
     },
 
-    getDraggableElement() {
+    getDraggableElement () {
       var selector =
         typeof this.draggable !== 'string' ? '.v--modal-box' : this.draggable
 
       if (selector) {
-        var handler = this.$refs.overlay.querySelector(selector)
+        const handler = this.$refs.overlay.querySelector(selector)
+
         if (handler) {
           return handler
         }
       }
     },
     /**
-       * Event handler that is triggered when background overlay is clicked
-       */
-    onBackgroundClick() {
+     * Event handler that is triggered when background overlay is clicked
+     */
+    onBackgroundClick () {
       if (this.clickToClose) {
         this.toggle(false)
       }
     },
 
-    addDraggableListeners() {
+    addDraggableListeners () {
       if (!this.draggable) {
         return
       }
@@ -559,18 +570,18 @@ export default {
       }
     },
 
-    removeDraggableListeners() {
+    removeDraggableListeners () {
       //  console.log('removing draggable handlers')
     },
 
     /**
-       * 'opened' and 'closed' events are `$emit`ed here.
-       * This is called in watch.visible.
-       * Because modal DOM updates are async,
-       * wrapping afterEvents in `$nextTick` fixes `$refs.modal` undefined bug.
-       * (fixes #15)
-       */
-    callAfterEvent(state) {
+     * 'opened' and 'closed' events are `$emit`ed here.
+     * This is called in watch.visible.
+     * Because modal DOM updates are async,
+     * wrapping afterEvents in `$nextTick` fixes `$refs.modal` undefined bug.
+     * (fixes #15)
+     */
+    callAfterEvent (state) {
       if (state) {
         this.connectObserver()
       } else {
@@ -584,22 +595,22 @@ export default {
     },
 
     /**
-       * Update $data.modal.renderedHeight using getBoundingClientRect.
-       * This method is called when:
-       * 1. modal opened
-       * 2. MutationObserver's observe callback
-       */
-    updateRenderedHeight() {
+     * Update $data.modal.renderedHeight using getBoundingClientRect.
+     * This method is called when:
+     * 1. modal opened
+     * 2. MutationObserver's observe callback
+     */
+    updateRenderedHeight () {
       if (this.$refs.modal) {
         this.modal.renderedHeight = this.$refs.modal.getBoundingClientRect().height
       }
     },
 
     /**
-       * Start observing modal's DOM, if childList or subtree changes,
-       * the callback (registered in beforeMount) will be called.
-       */
-    connectObserver() {
+     * Start observing modal's DOM, if childList or subtree changes,
+     * the callback (registered in beforeMount) will be called.
+     */
+    connectObserver () {
       if (this.mutationObserver) {
         this.mutationObserver.observe(this.$refs.modal, {
           childList: true,
@@ -610,9 +621,9 @@ export default {
     },
 
     /**
-       * Disconnects MutationObserver
-       */
-    disconnectObserver() {
+     * Disconnects MutationObserver
+     */
+    disconnectObserver () {
       if (this.mutationObserver) {
         this.mutationObserver.disconnect()
       }
@@ -622,8 +633,8 @@ export default {
 </script>
 <style>
 .v--modal-block-scroll {
+  position: absolute;
   overflow: hidden;
-  position: fixed;
   width: 100vw;
 }
 
diff --git a/src/ModalsContainer.vue b/src/ModalsContainer.vue
new file mode 100644
index 0000000..479dedd
--- /dev/null
+++ b/src/ModalsContainer.vue
@@ -0,0 +1,50 @@
+<template>
+    <div id="#modals-container">
+        <modal
+            v-for="modal in modals"
+            :key="modal.id"
+            :name="modal.name"
+            v-bind="modal.config"
+            @closed="remove(modal.id)"
+        >
+            <component :is="modal.component" v-bind="modal.params"></component>
+        </modal>
+    </div>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      uid: 0,
+      modals: []
+    }
+  },
+  created () {
+    this.$modal._setDynamicContainer(this)
+  },
+  methods: {
+    add (modal, params, config) {
+      let id = this.uid++
+      let name = '_dynamic-modal-' + id
+      this.modals.push({
+        id: id,
+        name: name,
+        component: modal,
+        params: params || {},
+        config: config || {}
+      })
+      this.$nextTick(() => {
+        this.$modal.show(name)
+      })
+    },
+    remove (id) {
+      for (let i in this.modals) {
+        if (this.modals[i].id === id) {
+          this.modals.splice(i, 1)
+          return
+        }
+      }
+    }
+  }
+}
+</script>
diff --git a/src/Resizer.vue b/src/Resizer.vue
index c56dc3f..a001d2f 100644
--- a/src/Resizer.vue
+++ b/src/Resizer.vue
@@ -16,22 +16,22 @@ export default {
       default: 0
     }
   },
-  data() {
+  data () {
     return {
       clicked: false,
       size: {}
     }
   },
-  mounted() {
+  mounted () {
     this.$el.addEventListener('mousedown', this.start, false)
   },
   computed: {
-    className() {
+    className () {
       return { 'vue-modal-resizer': true, clicked: this.clicked }
     }
   },
   methods: {
-    start(event) {
+    start (event) {
       this.clicked = true
 
       window.addEventListener('mousemove', this.mousemove, false)
@@ -40,7 +40,7 @@ export default {
       event.stopPropagation()
       event.preventDefault()
     },
-    stop() {
+    stop () {
       this.clicked = false
 
       window.removeEventListener('mousemove', this.mousemove, false)
@@ -51,10 +51,10 @@ export default {
         size: this.size
       })
     },
-    mousemove(event) {
+    mousemove (event) {
       this.resize(event)
     },
-    resize(event) {
+    resize (event) {
       var el = this.$el.parentElement
 
       if (el) {
diff --git a/src/index.js b/src/index.js
index 23d2032..ef0a566 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,10 +1,11 @@
 import Modal from './Modal.vue'
 import Dialog from './Dialog.vue'
+import ModalsContainer from './ModalsContainer.vue'
 
 const defaultComponentName = 'modal'
 
 const Plugin = {
-  install(Vue, options = {}) {
+  install (Vue, options = {}) {
     /**
      * Makes sure that plugin can be insstalled only once
      */
@@ -14,19 +15,31 @@ const Plugin = {
 
     this.installed = true
     this.event = new Vue()
+    this.dynamicContainer = null
+
     /**
      * Plugin API
      */
     Vue.prototype.$modal = {
-      show(name, params) {
-        Plugin.event.$emit('toggle', name, true, params)
+      _setDynamicContainer (dynamicContainer) {
+        Plugin.dynamicContainer = dynamicContainer
       },
-
-      hide(name, params) {
+      show (modal, paramsOrProps, params) {
+        if (typeof modal === 'string') {
+          Plugin.event.$emit('toggle', modal, true, paramsOrProps)
+        } else {
+          if (Plugin.dynamicContainer === null) {
+            console.warn('[vue-js-modal] In order to render dynamic modals, a <modals-container> component must be present on the page')
+          } else {
+            Plugin.dynamicContainer.add(modal, paramsOrProps, params)
+          }
+        }
+      },
+      hide (name, params) {
         Plugin.event.$emit('toggle', name, false, params)
       },
 
-      toggle(name, params) {
+      toggle (name, params) {
         Plugin.event.$emit('toggle', name, undefined, params)
       }
     }
@@ -41,6 +54,12 @@ const Plugin = {
     if (options.dialog) {
       Vue.component('v-dialog', Dialog)
     }
+    /**
+     * Registration of <ModalsContainer/> component
+     */
+    if (options.dynamic) {
+      Vue.component('modals-container', ModalsContainer)
+    }
   }
 }
 
diff --git a/src/parser.js b/src/parser.js
index 4de3c75..567f93d 100644
--- a/src/parser.js
+++ b/src/parser.js
@@ -28,7 +28,8 @@ var getType = value => {
   }
 
   for (var i = 0; i < types.length; i++) {
-    let type = types[i]
+    const type = types[i]
+
     if (type.regexp.test(value)) {
       return {
         type: type.name,
diff --git a/types/index.d.ts b/types/index.d.ts
index a2a7d12..0ca8d46 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -1,4 +1,4 @@
-import Vue, { PluginObject } from "vue";
+import Vue, { PluginObject, ComponentOptions } from "vue";
 
 declare const VueJSModal: PluginObject<VueJSModalOptions>;
 export default VueJSModal;
@@ -9,7 +9,7 @@ export declare interface VueJSModalOptions {
 }
 
 declare interface VModal {
-  show(name: string, params?: object): void;
+  show(modal: string | typeof Vue | ComponentOptions<Vue>, paramsOrProps?: object, params?: object): void;
   hide(name: string, params?: object): void;
   toggle(name: string, params?: object): void;
 }