diff --git a/docs/app/pages/Components/Dialog/Dialog.vue b/docs/app/pages/Components/Dialog/Dialog.vue
index d18f5316e..ade06deed 100644
--- a/docs/app/pages/Components/Dialog/Dialog.vue
+++ b/docs/app/pages/Components/Dialog/Dialog.vue
@@ -9,8 +9,10 @@
       <p>Dialogs informs users about a specific task and may contain critical information, require decisions, or involve multiple tasks. The dialog component works with any plain html content. You can have tabs inside, all form components and many more.</p>
       <p>The component can be used with a custom markup, using the auxiliary components or with presets made by Vue Material. Those presets emulates the default Dialogs from Javascript, like confirm, alert and prompt.</p>
 
-      <note-block tip>To allow scrolling in content of modal you need to wrap your content in <code>md-dialog-content</code> component.</note-block>
-
+      <note-block tip>
+        To allow scrolling in content of modal you need to wrap your content in
+        <code>md-dialog-content</code> component.
+      </note-block>
     </div>
     <div class="page-container-section">
       <h2 id="dialog">Dialog</h2>
@@ -67,218 +69,230 @@
 </template>
 
 <script>
-  import examples from 'docs-mixins/docsExample'
+import examples from "docs-mixins/docsExample";
 
-  export default {
-    name: 'DocDialog',
-    mixins: [examples],
-    data () {
-      return {
-        dialog: {
-          props: {
-            headings: ['Name', 'Description', 'Default'],
-            props: [
-              {
-                name: 'md-active',
-                type: 'Boolean',
-                description: 'The prop to show/hide the dialog. Should be used with the <code>.sync</code> modifier.',
-                defaults: 'false'
-              },
-              {
-                name: 'md-backdrop',
-                type: 'Boolean',
-                description: 'Enable/disable the dialog overlay',
-                defaults: 'true'
-              },
-              {
-                name: 'md-close-on-esc',
-                type: 'Boolean',
-                description: 'By the default the dialog will close when pressing esc. To disabled that, just set this prop as false',
-                defaults: 'true'
-              },
-              {
-                name: 'md-click-outside-to-close',
-                type: 'Boolean',
-                description: 'By the default the dialog will close when clicking outsite. To disabled that, just set this prop as false',
-                defaults: 'true'
-              },
-              {
-                name: 'md-fullscreen',
-                type: 'Boolean',
-                description: 'The dialog will become fullscreen on mobile screens. This option can disable this behavior.',
-                defaults: 'true'
-              }
-            ]
-          },
-          events: {
-            headings: ['Name', 'Description', 'Value'],
-            props: [
-              {
-                name: 'md-opened',
-                description: 'Triggered when a dialog opens',
-                value: 'null'
-              },
-              {
-                name: 'md-closed',
-                description: 'Triggered when a dialog closes',
-                value: 'null'
-              },
-              {
-                name: 'md-clicked-outside',
-                description: 'Triggered when clicked outside',
-                value: 'null'
-              }
-            ]
-          }
+export default {
+  name: "DocDialog",
+  mixins: [examples],
+  data() {
+    return {
+      dialog: {
+        props: {
+          headings: ["Name", "Description", "Default"],
+          props: [
+            {
+              name: "md-active",
+              type: "Boolean",
+              description:
+                "The prop to show/hide the dialog. Should be used with the <code>.sync</code> modifier.",
+              defaults: "false",
+            },
+            {
+              name: "md-backdrop",
+              type: "Boolean",
+              description: "Enable/disable the dialog overlay",
+              defaults: "true",
+            },
+            {
+              name: "md-close-on-esc",
+              type: "Boolean",
+              description:
+                "By the default the dialog will close when pressing esc. To disabled that, just set this prop as false",
+              defaults: "true",
+            },
+            {
+              name: "md-click-outside-to-close",
+              type: "Boolean",
+              description:
+                "By the default the dialog will close when clicking outsite. To disabled that, just set this prop as false",
+              defaults: "true",
+            },
+            {
+              name: "md-fullscreen",
+              type: "Boolean",
+              description:
+                "The dialog will become fullscreen on mobile screens. This option can disable this behavior.",
+              defaults: "true",
+            },
+            {
+              name: "md-target",
+              type: "HTMLElement",
+              description:
+                "The dialog will be attached inside of the specificied HTML element instead of the body tag. The HTMLElement needs to have position relative CSS property.",
+              defaults: "null",
+            },
+          ],
+        },
+        events: {
+          headings: ["Name", "Description", "Value"],
+          props: [
+            {
+              name: "md-opened",
+              description: "Triggered when a dialog opens",
+              value: "null",
+            },
+            {
+              name: "md-closed",
+              description: "Triggered when a dialog closes",
+              value: "null",
+            },
+            {
+              name: "md-clicked-outside",
+              description: "Triggered when clicked outside",
+              value: "null",
+            },
+          ],
+        },
+      },
+      alert: {
+        props: {
+          headings: ["Name", "Description", "Default"],
+          props: [
+            {
+              name: "md-title",
+              type: "String",
+              description: "The alert title. Optional.",
+              defaults: "null",
+            },
+            {
+              name: "md-content",
+              type: "String",
+              description: "The alert content. Accepts HTML. Optional.",
+              defaults: "null",
+            },
+            {
+              name: "md-confirm-text",
+              type: "String",
+              description: "The text inside confirm button",
+              defaults: "Ok",
+            },
+          ],
+        },
+      },
+      confirm: {
+        props: {
+          headings: ["Name", "Description", "Default"],
+          props: [
+            {
+              name: "md-title",
+              type: "String",
+              description: "The alert title. Optional.",
+              defaults: "null",
+            },
+            {
+              name: "md-content",
+              type: "String",
+              description: "The alert content. Accepts HTML. Optional.",
+              defaults: "null",
+            },
+            {
+              name: "md-confirm-text",
+              type: "String",
+              description: "The text inside confirm button",
+              defaults: "Ok",
+            },
+            {
+              name: "md-cancel-text",
+              type: "String",
+              description: "The text inside cancel button",
+              defaults: "Cancel",
+            },
+          ],
+        },
+        events: {
+          headings: ["Name", "Description", "Value"],
+          props: [
+            {
+              name: "md-confirm",
+              description: "Triggered when the confirm button receives a click",
+              value: "null",
+            },
+            {
+              name: "md-cancel",
+              description: "Triggered when the user dismiss the dialog",
+              value: "null",
+            },
+          ],
         },
-        alert: {
-          props: {
-            headings: ['Name', 'Description', 'Default'],
-            props: [
-              {
-                name: 'md-title',
-                type: 'String',
-                description: 'The alert title. Optional.',
-                defaults: 'null'
-              },
-              {
-                name: 'md-content',
-                type: 'String',
-                description: 'The alert content. Accepts HTML. Optional.',
-                defaults: 'null'
-              },
-              {
-                name: 'md-confirm-text',
-                type: 'String',
-                description: 'The text inside confirm button',
-                defaults: 'Ok'
-              }
-            ]
-          }
+      },
+      prompt: {
+        props: {
+          headings: ["Name", "Description", "Default"],
+          props: [
+            {
+              name: "v-model",
+              type: "String|Number",
+              description: "The model variable to bind the input prompt value",
+              defaults: "null",
+            },
+            {
+              name: "md-input-name",
+              type: "String",
+              description: "The input name attribute",
+              defaults: "null",
+            },
+            {
+              name: "md-input-id",
+              type: "String",
+              description: "The input id attribute",
+              defaults: "null",
+            },
+            {
+              name: "md-input-max-length",
+              type: "Number",
+              description:
+                "Enables the character count, based on the given value.",
+              defaults: "null",
+            },
+            {
+              name: "md-input-placeholder",
+              type: "Number",
+              description: "Sets a optional placeholder on input.",
+              defaults: "null",
+            },
+            {
+              name: "md-title",
+              type: "String",
+              description: "The alert title. Optional.",
+              defaults: "null",
+            },
+            {
+              name: "md-content",
+              type: "String",
+              description: "The alert content. Accepts HTML. Optional.",
+              defaults: "null",
+            },
+            {
+              name: "md-confirm-text",
+              type: "String",
+              description: "The text inside confirm button",
+              defaults: "Ok",
+            },
+            {
+              name: "md-cancel-text",
+              type: "String",
+              description: "The text inside cancel button",
+              defaults: "Cancel",
+            },
+          ],
         },
-        confirm: {
-          props: {
-            headings: ['Name', 'Description', 'Default'],
-            props: [
-              {
-                name: 'md-title',
-                type: 'String',
-                description: 'The alert title. Optional.',
-                defaults: 'null'
-              },
-              {
-                name: 'md-content',
-                type: 'String',
-                description: 'The alert content. Accepts HTML. Optional.',
-                defaults: 'null'
-              },
-              {
-                name: 'md-confirm-text',
-                type: 'String',
-                description: 'The text inside confirm button',
-                defaults: 'Ok'
-              },
-              {
-                name: 'md-cancel-text',
-                type: 'String',
-                description: 'The text inside cancel button',
-                defaults: 'Cancel'
-              }
-            ]
-          },
-          events: {
-            headings: ['Name', 'Description', 'Value'],
-            props: [
-              {
-                name: 'md-confirm',
-                description: 'Triggered when the confirm button receives a click',
-                value: 'null'
-              },
-              {
-                name: 'md-cancel',
-                description: 'Triggered when the user dismiss the dialog',
-                value: 'null'
-              }
-            ]
-          }
+        events: {
+          headings: ["Name", "Description", "Value"],
+          props: [
+            {
+              name: "md-confirm",
+              description: "Triggered when the confirm button receives a click",
+              value: "Input Value",
+            },
+            {
+              name: "md-cancel",
+              description: "Triggered when the user dismiss the dialog",
+              value: "null",
+            },
+          ],
         },
-        prompt: {
-          props: {
-            headings: ['Name', 'Description', 'Default'],
-            props: [
-              {
-                name: 'v-model',
-                type: 'String|Number',
-                description: 'The model variable to bind the input prompt value',
-                defaults: 'null'
-              },
-              {
-                name: 'md-input-name',
-                type: 'String',
-                description: 'The input name attribute',
-                defaults: 'null'
-              },
-              {
-                name: 'md-input-id',
-                type: 'String',
-                description: 'The input id attribute',
-                defaults: 'null'
-              },
-              {
-                name: 'md-input-max-length',
-                type: 'Number',
-                description: 'Enables the character count, based on the given value.',
-                defaults: 'null'
-              },
-              {
-                name: 'md-input-placeholder',
-                type: 'Number',
-                description: 'Sets a optional placeholder on input.',
-                defaults: 'null'
-              },
-              {
-                name: 'md-title',
-                type: 'String',
-                description: 'The alert title. Optional.',
-                defaults: 'null'
-              },
-              {
-                name: 'md-content',
-                type: 'String',
-                description: 'The alert content. Accepts HTML. Optional.',
-                defaults: 'null'
-              },
-              {
-                name: 'md-confirm-text',
-                type: 'String',
-                description: 'The text inside confirm button',
-                defaults: 'Ok'
-              },
-              {
-                name: 'md-cancel-text',
-                type: 'String',
-                description: 'The text inside cancel button',
-                defaults: 'Cancel'
-              }
-            ]
-          },
-          events: {
-            headings: ['Name', 'Description', 'Value'],
-            props: [
-              {
-                name: 'md-confirm',
-                description: 'Triggered when the confirm button receives a click',
-                value: 'Input Value'
-              },
-              {
-                name: 'md-cancel',
-                description: 'Triggered when the user dismiss the dialog',
-                value: 'null'
-              }
-            ]
-          }
-        }
-      }
-    }
-  }
+      },
+    };
+  },
+};
 </script>
diff --git a/src/components/MdDialog/MdDialog.vue b/src/components/MdDialog/MdDialog.vue
index e78058042..9ca989891 100644
--- a/src/components/MdDialog/MdDialog.vue
+++ b/src/components/MdDialog/MdDialog.vue
@@ -1,13 +1,24 @@
 <template>
-  <md-portal>
+  <md-portal :mdTarget="mdTarget">
     <transition name="md-dialog">
-      <div class="md-dialog" v-if="mdActive">
+      <div class="md-dialog" :class=" mdTarget ? 'with-target' : '' " v-if="mdActive">
         <md-focus-trap>
-          <div class="md-dialog-container" :class="[dialogContainerClasses, $mdActiveTheme]" v-on="$listeners"
-               @keydown.esc="onEsc">
+          <div
+            class="md-dialog-container"
+            :class="[dialogContainerClasses, $mdActiveTheme]"
+            v-on="$listeners"
+            @keydown.esc="onEsc"
+          >
             <slot />
             <keep-alive>
-              <md-overlay :class="mdBackdropClass" md-fixed :md-active="mdActive" @click="onClick" v-if="mdBackdrop" />
+              <md-overlay
+                :class="mdBackdropClass"
+                :mdTarget="mdTarget"
+                :md-fixed=" mdTarget ? false : true "
+                :md-active="mdActive"
+                @click="onClick"
+                v-if="mdBackdrop"
+              />
             </keep-alive>
           </div>
         </md-focus-trap>
@@ -17,205 +28,223 @@
 </template>
 
 <script>
-  import MdComponent from 'core/MdComponent'
-  import MdPortal from 'components/MdPortal/MdPortal'
-  import MdOverlay from 'components/MdOverlay/MdOverlay'
-  import MdFocusTrap from 'components/MdFocusTrap/MdFocusTrap'
-
-  export default new MdComponent({
-    name: 'MdDialog',
-    components: {
-      MdPortal,
-      MdOverlay,
-      MdFocusTrap
-    },
-    props: {
-      mdActive: Boolean,
-      mdBackdrop: {
-        type: Boolean,
-        default: true
-      },
-      mdBackdropClass: {
-        type: String,
-        default: 'md-dialog-overlay'
-      },
-      mdCloseOnEsc: {
-        type: Boolean,
-        default: true
-      },
-      mdClickOutsideToClose: {
-        type: Boolean,
-        default: true
-      },
-      mdFullscreen: {
-        type: Boolean,
-        default: true
-      },
-      mdAnimateFromSource: Boolean
-    },
-    computed: {
-      dialogClasses () {
-        return {
-          'md-active': this.mdActive
-        }
-      },
-      dialogContainerClasses () {
-        return {
-          'md-dialog-fullscreen': this.mdFullscreen
-        }
-      }
-    },
-    watch: {
-      mdActive (isActive) {
-        this.$nextTick().then(() => {
-          if (isActive) {
-            this.$emit('md-opened')
-          } else {
-            this.$emit('md-closed')
-          }
-        })
-      }
-    },
-    methods: {
-      closeDialog () {
-        this.$emit('update:mdActive', false)
-      },
-      onClick () {
-        if (this.mdClickOutsideToClose) {
-          this.closeDialog()
-        }
-        this.$emit('md-clicked-outside')
-      },
-      onEsc () {
-        if (this.mdCloseOnEsc) {
-          this.closeDialog()
-        }
-      }
-    }
-  })
+	import MdComponent from "core/MdComponent";
+	import MdPortal from "components/MdPortal/MdPortal";
+	import MdOverlay from "components/MdOverlay/MdOverlay";
+	import MdFocusTrap from "components/MdFocusTrap/MdFocusTrap";
+
+	export default new MdComponent({
+		name: "MdDialog",
+		components: {
+			MdPortal,
+			MdOverlay,
+			MdFocusTrap,
+		},
+		props: {
+			mdActive: Boolean,
+			mdTarget: {
+				type: null,
+				default: null,
+			},
+			mdBackdrop: {
+				type: Boolean,
+				default: true,
+			},
+			mdBackdropClass: {
+				type: String,
+				default: "md-dialog-overlay",
+			},
+			mdCloseOnEsc: {
+				type: Boolean,
+				default: true,
+			},
+			mdClickOutsideToClose: {
+				type: Boolean,
+				default: true,
+			},
+			mdFullscreen: {
+				type: Boolean,
+				default: true,
+			},
+			mdAnimateFromSource: Boolean,
+		},
+		computed: {
+			dialogClasses() {
+				return {
+					"md-active": this.mdActive,
+				};
+			},
+			dialogContainerClasses() {
+				return {
+					"md-dialog-fullscreen": this.mdFullscreen,
+				};
+			},
+		},
+		watch: {
+			mdActive(isActive) {
+				if (this.mdTarget) {
+					if (isActive) {
+						this.mdTarget.style.overflow = "hidden";
+					} else {
+						this.mdTarget.style.overflow = "auto";
+					}
+				}
+				this.$nextTick().then(() => {
+					if (isActive) {
+						this.$emit("md-opened");
+					} else {
+						this.$emit("md-closed");
+					}
+				});
+			},
+		},
+		methods: {
+			closeDialog() {
+				this.$emit("update:mdActive", false);
+			},
+			onClick() {
+				if (this.mdClickOutsideToClose) {
+					this.closeDialog();
+				}
+				this.$emit("md-clicked-outside");
+			},
+			onEsc() {
+				if (this.mdCloseOnEsc) {
+					this.closeDialog();
+				}
+			},
+		},
+	});
 </script>
 
 <style lang="scss">
-  @import "~components/MdAnimation/variables";
-  @import "~components/MdLayout/mixins";
-  @import "~components/MdElevation/mixins";
-
-  $opacity-transition-duration: .15s;
-  $transform-transition-duration: .20s;
-  $max-duration: max($opacity-transition-duration, $transform-transition-duration);
-
-  .md-dialog {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    align-items: center;
-    justify-content: center;
-    pointer-events: none;
-    display: flex;
-    transition-duration: $max-duration;
-    z-index: 110;
-
-    &.md-dialog-leave,
-    &.md-dialog-enter-to {
-      .md-dialog-container {
-        opacity: 1;
-        transform: scale(1);
-      }
-
-      .md-dialog-fullscreen {
-        @include md-layout-xsmall {
-          opacity: 0;
-          transform: translate(0, 30%);
-        }
-      }
-    }
-
-    &.md-dialog-enter,
-    &.md-dialog-leave-to {
-      .md-dialog-container {
-        opacity: 0;
-        transform: scale(.9);
-      }
-
-      .md-dialog-fullscreen {
-        @include md-layout-xsmall {
-          opacity: 1;
-          transform: translate(0, 0);
-        }
-      }
-    }
-
-  }
-
-  .md-dialog-container {
-    @include md-elevation(24);
-    min-width: 280px;
-    max-width: 80%;
-    max-height: 80%;
-    margin: auto;
-    display: flex;
-    flex-flow: column;
-    overflow: hidden;
-    border-radius: 2px;
-    backface-visibility: hidden;
-    pointer-events: auto;
-    opacity: 1;
-    transform-origin: center center;
-    transition: opacity $opacity-transition-duration $md-transition-stand-timing, transform $transform-transition-duration $md-transition-stand-timing;
-    will-change: opacity, transform;
-
-    &.md-dialog-leave,
-    &.md-dialog-enter-to {
-      opacity: 1;
-      transform: translate(-50%, -50%) scale(1);
-    }
-
-    &.md-dialog-enter,
-    &.md-dialog-leave-to {
-      opacity: 0;
-      transform: translate(-50%, -50%) scale(.9);
-    }
-  }
-
-  .md-dialog-container {
-    .md-tabs {
-      flex: 1;
-      max-width: 100%;
-    }
-
-    .md-tabs-navigation {
-      padding: 0 12px;
-    }
-
-    .md-tab {
-      @include md-layout-xsmall {
-        padding: 12px;
-      }
-    }
-  }
-
-  .md-dialog-fullscreen {
-    @include md-layout-xsmall {
-      width: 100%;
-      height: 100%;
-      max-width: 100%;
-      max-height: 100%;
-      border-radius: 0;
-      transform: none;
-
-      &.md-dialog-enter,
-      &.md-dialog-leave-to {
-        opacity: 0;
-        transform: translate3D(0, 30%, 0);
-      }
-
-      &.md-dialog-leave,
-      &.md-dialog-enter-to {
-        opacity: 1;
-        transform: translate3D(0, 0, 0);
-      }
-    }
-  }
-</style>
+	@import "~components/MdAnimation/variables";
+	@import "~components/MdLayout/mixins";
+	@import "~components/MdElevation/mixins";
+
+	$opacity-transition-duration: 0.15s;
+	$transform-transition-duration: 0.2s;
+	$max-duration: max(
+		$opacity-transition-duration,
+		$transform-transition-duration
+	);
+
+	.md-dialog {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		align-items: center;
+		justify-content: center;
+		pointer-events: none;
+		display: flex;
+		transition-duration: $max-duration;
+		z-index: 110;
+
+		&.with-target {
+			position: absolute;
+		}
+
+		&.md-dialog-leave,
+		&.md-dialog-enter-to {
+			.md-dialog-container {
+				opacity: 1;
+				transform: scale(1);
+			}
+
+			.md-dialog-fullscreen {
+				@include md-layout-xsmall {
+					opacity: 0;
+					transform: translate(0, 30%);
+				}
+			}
+		}
+
+		&.md-dialog-enter,
+		&.md-dialog-leave-to {
+			.md-dialog-container {
+				opacity: 0;
+				transform: scale(0.9);
+			}
+
+			.md-dialog-fullscreen {
+				@include md-layout-xsmall {
+					opacity: 1;
+					transform: translate(0, 0);
+				}
+			}
+		}
+	}
+
+	.md-dialog-container {
+		@include md-elevation(24);
+		min-width: 280px;
+		max-width: 80%;
+		max-height: 80%;
+		margin: auto;
+		display: flex;
+		flex-flow: column;
+		overflow: hidden;
+		border-radius: 2px;
+		backface-visibility: hidden;
+		pointer-events: auto;
+		opacity: 1;
+		transform-origin: center center;
+		transition: opacity $opacity-transition-duration $md-transition-stand-timing,
+			transform $transform-transition-duration $md-transition-stand-timing;
+		will-change: opacity, transform;
+
+		&.md-dialog-leave,
+		&.md-dialog-enter-to {
+			opacity: 1;
+			transform: translate(-50%, -50%) scale(1);
+		}
+
+		&.md-dialog-enter,
+		&.md-dialog-leave-to {
+			opacity: 0;
+			transform: translate(-50%, -50%) scale(0.9);
+		}
+	}
+
+	.md-dialog-container {
+		.md-tabs {
+			flex: 1;
+			max-width: 100%;
+		}
+
+		.md-tabs-navigation {
+			padding: 0 12px;
+		}
+
+		.md-tab {
+			@include md-layout-xsmall {
+				padding: 12px;
+			}
+		}
+	}
+
+	.md-dialog-fullscreen {
+		@include md-layout-xsmall {
+			width: 100%;
+			height: 100%;
+			max-width: 100%;
+			max-height: 100%;
+			border-radius: 0;
+			transform: none;
+
+			&.md-dialog-enter,
+			&.md-dialog-leave-to {
+				opacity: 0;
+				transform: translate3D(0, 30%, 0);
+			}
+
+			&.md-dialog-leave,
+			&.md-dialog-enter-to {
+				opacity: 1;
+				transform: translate3D(0, 0, 0);
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/components/MdDialog/MdDialogActions.vue b/src/components/MdDialog/MdDialogActions.vue
index 5ac3411a7..ceaacbddf 100644
--- a/src/components/MdDialog/MdDialogActions.vue
+++ b/src/components/MdDialog/MdDialogActions.vue
@@ -5,9 +5,9 @@
 </template>
 
 <script>
-export default {
-  name: 'MdDialogActions'
-}
+	export default {
+		name: 'MdDialogActions'
+	}
 </script>
 
 <style lang="scss">
@@ -19,7 +19,9 @@ export default {
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    position: relative;
+	position: relative;
+	backface-visibility: hidden;
+	
 
     &:before {
       height: 1px;
diff --git a/src/components/MdOverlay/MdOverlay.vue b/src/components/MdOverlay/MdOverlay.vue
index 37a26ab19..7ac8302da 100644
--- a/src/components/MdOverlay/MdOverlay.vue
+++ b/src/components/MdOverlay/MdOverlay.vue
@@ -1,5 +1,5 @@
 <template>
-  <md-portal :md-attach-to-parent="mdAttachToParent">
+  <md-portal :md-attach-to-parent="mdAttachToParent" :mdTarget="mdTarget">
     <transition name="md-overlay">
       <div class="md-overlay" :class="overlayClasses" v-on="$listeners" v-if="mdActive"></div>
     </transition>
@@ -7,52 +7,56 @@
 </template>
 
 <script>
-  import MdPortal from 'components/MdPortal/MdPortal'
+	import MdPortal from "components/MdPortal/MdPortal";
 
-  export default {
-    name: 'MdOverlay',
-    components: {
-      MdPortal
-    },
-    props: {
-      mdActive: Boolean,
-      mdAttachToParent: Boolean,
-      mdFixed: Boolean
-    },
-    computed: {
-      overlayClasses () {
-        return {
-          'md-fixed': this.mdFixed
-        }
-      }
-    }
-  }
+	export default {
+		name: "MdOverlay",
+		components: {
+			MdPortal,
+		},
+		props: {
+			mdTarget: {
+				type: null,
+				default: null,
+			},
+			mdActive: Boolean,
+			mdAttachToParent: Boolean,
+			mdFixed: Boolean,
+		},
+		computed: {
+			overlayClasses() {
+				return {
+					"md-fixed": this.mdFixed,
+				};
+			},
+		},
+	};
 </script>
 
 <style lang="scss">
-  @import "~components/MdAnimation/variables";
+	@import "~components/MdAnimation/variables";
 
-  .md-overlay {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 10;
-    overflow: hidden;
-    background: rgba(#000, .6);
-    transition: .35s $md-transition-default-timing;
-    transition-property: opacity;
-    will-change: opacity;
+	.md-overlay {
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		z-index: 10;
+		overflow: hidden;
+		background: rgba(#000, 0.6);
+		transition: 0.35s $md-transition-default-timing;
+		transition-property: opacity;
+		will-change: opacity;
 
-    body > &,
-    &.md-fixed {
-      position: fixed;
-    }
-  }
+		body > &,
+		&.md-fixed {
+			position: fixed;
+		}
+	}
 
-  .md-overlay-enter,
-  .md-overlay-leave-active {
-    opacity: 0;
-  }
+	.md-overlay-enter,
+	.md-overlay-leave-active {
+		opacity: 0;
+	}
 </style>