Merge pull request #2556 from Leopoldthecoder/dialog-modal

Dialog: add modalAppendToBody

examples/docs/en-US/dialog.md

@@ -164,6 +164,7 @@ The content of Dialog can be anything, even a table or a form. This example show
 | size      | size of Dialog | string    | tiny/small/large/full | small |
 | top      | value for `top` of Dialog CSS, works when `size` is not `full` | string    | — | 15% |
 | modal     | whether a mask is displayed | boolean   | — | true |
+| modalAppendToBody     | whether to append modal to body element. If false, the modal will be appended to Dialog's parent element | boolean   | — | true |
 | lock-scroll     | whether scroll of body is disabled while Dialog is displayed | boolean   | — | true |
 | custom-class      | custom class names for Dialog | string    | — | — |
 | close-on-click-modal | whether the Dialog can be closed by clicking the mask | boolean    | — | true |

examples/docs/zh-CN/dialog.md

@@ -183,6 +183,7 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下
 | size      | Dialog 的大小 | string    | tiny/small/large/full | small |
 | top       | Dialog CSS 中的 top 值（仅在 size 不为 full 时有效） | string    | —                       | 15%     |
 | modal     | 是否需要遮罩层   | boolean   | — | true |
+| modalAppendToBody     | 遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上   | boolean   | — | true |
 | lock-scroll | 是否在 Dialog 出现时将 body 滚动锁定 | boolean | — | true |
 | custom-class      | Dialog 的自定义类名 | string    | — | — |
 | close-on-click-modal | 是否可以通过点击 modal 关闭 Dialog | boolean    | — | true |

packages/dialog/src/component.vue

@@ -40,6 +40,11 @@
         default: true
       },
   
+      modalAppendToBody: {
+        type: Boolean,
+        default: true
+      },
+
       lockScroll: {
         type: Boolean,
         default: true

src/utils/popup/index.js

@@ -93,6 +93,10 @@ export default {
     },
     modalClass: {
     },
+    modalAppendToBody: {
+      type: Boolean,
+      default: false
+    },
     lockScroll: {
       type: Boolean,
       default: true
@@ -208,7 +212,7 @@ export default {
           PopupManager.closeModal(this._popupId);
           this._closing = false;
         }
-        PopupManager.openModal(this._popupId, PopupManager.nextZIndex(), dom, props.modalClass, props.modalFade);
+        PopupManager.openModal(this._popupId, PopupManager.nextZIndex(), this.modalAppendToBody ? undefined : dom, props.modalClass, props.modalFade);
         if (props.lockScroll) {
           if (!this.bodyOverflow) {
             this.bodyPaddingRight = document.body.style.paddingRight;