diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index 82265d2..0ace491 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -1,6 +1,6 @@
 <template>
-    <div :class="wrapClasses">
-        <div :class="maskClasses" v-show="visible" @click="mask" transition="fade"></div>
+    <div :class="maskClasses" v-show="visible" @click="mask" transition="fade"></div>
+    <div :class="wrapClasses" @click="handleWrapClick">
         <div :class="classes" :style="styles" v-show="visible" transition="ease">
             <div :class="[prefixCls + '-content']">
                 <a :class="[prefixCls + '-close']" v-if="closable" @click="close">
@@ -130,6 +130,10 @@
                     this.close();
                 }
             },
+            handleWrapClick (event) {
+                // use indexOf,do not use === ,because ivu-modal-wrap can have other custom className
+                if (event.target.getAttribute('class').indexOf(`${prefixCls}-wrap`) > -1) this.mask();
+            },
             cancel () {
                 this.close();
             },
diff --git a/src/styles/mixins/mask.less b/src/styles/mixins/mask.less
index 2d69d4e..6631950 100644
--- a/src/styles/mixins/mask.less
+++ b/src/styles/mixins/mask.less
@@ -6,6 +6,7 @@
     right: 0;
     background-color: rgba(55, 55, 55, 0.6);
     height: 100%;
+    z-index: @zindex-modal;
 
     &-hidden {
         display: none;
diff --git a/test/routers/more.vue b/test/routers/more.vue
index 9a702f2..aa1c63a 100644
--- a/test/routers/more.vue
+++ b/test/routers/more.vue
@@ -1,39 +1,40 @@
-<style>
-    body{
-        height: 2000px !important;
+<style lang="less">
+    .vertical-center-modal{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+    .ivu-modal{
+        top: 0;
+    }
     }
 </style>
 <template>
-    <i-button type="primary" @click="modal1 = true">显示对话框</i-button>
-    <i-button @click="scrollable = !scrollable">Toggle scrollable</i-button>
-    scrollable:{{scrollable}}
+    <i-button @click="modal9 = true">距离顶部 20px</i-button>
     <Modal
-            :visible.sync="modal1"
-            title="普通的Modal对话框标题"
-            :scrollable="scrollable"
-            @on-ok="ok"
-            @on-cancel="cancel">
+            title="对话框标题"
+            :visible.sync="modal9"
+            :style="{top: '20px'}">
+        <p>对话框内容</p>
+        <p>对话框内容</p>
+        <p>对话框内容</p>
+    </Modal>
+    <i-button @click="modal10 = true">垂直居中</i-button>
+    <Modal
+            title="对话框标题"
+            :visible.sync="modal10"
+            class-name="vertical-center-modal">
         <p>对话框内容</p>
         <p>对话框内容</p>
         <p>对话框内容</p>
-        <i-button @click="scrollable = !scrollable">Toggle scrollable</i-button>
     </Modal>
 </template>
 <script>
     export default {
         data () {
             return {
-                modal1: false,
-                scrollable: false
-            }
-        },
-        methods: {
-            ok () {
-                this.$nextTick(() => this.modal1 = true);
-                this.$Message.info('点击了确定');
-            },
-            cancel () {
-                this.$Message.info('点击了取消');
+                modal9: false,
+                modal10: false,
             }
         }
     }
--
libgit2 0.21.4