set attach prop default to false, bugfix attach equal false

hunterliu1003 · hunterliu1003 · commit 6d7b2074eeef · 2020-08-27T11:22:12.000+08:00
diff --git a/README.md b/README.md
@@ -92,7 +92,7 @@ export default {
 | overlayClass | String | --- | '' | Add classes to the overlay element. |
 | transition | String | --- | 'vfm' | CSS transition applied to the modal window. |
 | overlayTransition | String | --- | 'vfm' | CSS transition applied to the overlay (background). |
-| attach | any | --- | false | Specifies which DOM element that this component should detach to. String can be any valid querySelector and Object can be any valid Node. |
+| attach | any | --- | 'body' | Specifies which DOM element that this component should detach to. Set `false` will disabled this feature. String can be any valid querySelector and Object can be any valid Node.  Component will attach to the <body> element by default. 
 
 ### Slots
 
diff --git a/docs/components/global/BaseExample.vue b/docs/components/global/BaseExample.vue
@@ -11,7 +11,7 @@
       :hide-overlay="false"
       :click-to-close="true"
       :prevent-click="false"
-      :attach="false"
+      attach="body"
       :z-index="1000"
     >
       <span class="text-2xl mb-2">Hello, world!</span>
@@ -30,6 +30,6 @@ export default {
 
 <style lang="scss" scoped>
 ::v-deep .overlay {
-  opacity: 0.5;
+  background-color: rgba(0, 0, 0, 0.5);
 }
 </style>
diff --git a/docs/content/en/properties.md b/docs/content/en/properties.md
@@ -79,12 +79,14 @@ The click event will not be blocked by overlay.
 ## `attach`
 
 - Type: `Any`
-- Default: `false`
+- Default: `body`
 
 Specifies which DOM element that this component should detach to.
 
-1. String can be any valid `querySelector`.
-2. Object can be any valid `Node`. 
+1. By default, the modal will be attached to the `<body>` element.
+2. Set `false` will disabled this feature. 
+3. String can be any valid `querySelector`
+4. Object can be any valid `Node`. 
 
 ## `zIndex`
 
@@ -111,7 +113,7 @@ Set `z-index` to both of the modal container and overlay elements.
       :hide-overlay="false"
       :click-to-close="true"
       :prevent-click="false"
-      :attach="false"
+      attach="body"
       :z-index="1000"
     >
       <span class="text-2xl mb-2">Hello, world!</span>
diff --git a/lib/VueFinalModal.vue b/lib/VueFinalModal.vue
@@ -87,7 +87,7 @@ export default {
     clickToClose: { type: Boolean, default: true },
     preventClick: { type: Boolean, default: false },
     overlayClass: { type: String, default: '' },
-    attach: { type: null, default: false, validator: validateAttachTarget },
+    attach: { type: null, default: 'body', validator: validateAttachTarget },
     transition: { type: String, default: 'vfm' },
     overlayTransition: { type: String, default: 'vfm' },
     zIndex: { type: [String, Number], default: 1000 }
@@ -141,8 +141,8 @@ export default {
     mounted(value) {
       if (value) {
         let target = this.getAttachElement()
-        if (target) {
-          target.appendChild(this.$el)
+        if (target || this.attach === false) {
+          this.attach !== false && target.appendChild(this.$el)
           let index = modalStack.findIndex(vm => vm === this)
           if (index !== -1) {
             // if this is already exist in modalStack, delete it
