diff --git a/examples/routers/modal.vue b/examples/routers/modal.vue
index 335473d0..e14f507f 100644
--- a/examples/routers/modal.vue
+++ b/examples/routers/modal.vue
@@ -1,45 +1,31 @@
 <template>
     <div>
-        <Button @click="confirm">标准</Button>
-        <Button @click="custom">自定义按钮文字</Button>
-        <Button @click="async">异步关闭</Button>
+        <Button type="primary" @click="modal1 = true">显示对话框</Button>
+        <Modal
+                v-model="modal1"
+                title="普通的Modal对话框标题"
+                :transition-names="['slide-up', 'ease']"
+                @on-ok="ok"
+                @on-cancel="cancel">
+            <p>对话框内容</p>
+            <p>对话框内容</p>
+            <p>对话框内容</p>
+        </Modal>
     </div>
 </template>
 <script>
     export default {
+        data () {
+            return {
+                modal1: false
+            }
+        },
         methods: {
-            confirm () {
-                this.$Modal.confirm({
-                    title: '确认对话框标题',
-                    content: '<p>一些对话框内容</p><p>一些对话框内容</p>',
-                    onOk: () => {
-                        this.$Message.info('点击了确定');
-                    },
-                    onCancel: () => {
-                        this.$Message.info('点击了取消');
-                    }
-                });
+            ok () {
+                this.$Message.info('点击了确定');
             },
-            custom () {
-                this.$Modal.confirm({
-                    title: '确认对话框标题',
-                    content: '<p>一些对话框内容</p><p>一些对话框内容</p>',
-                    okText: 'OK',
-                    cancelText: 'Cancel'
-                });
-            },
-            async () {
-                this.$Modal.confirm({
-                    title: '确认对话框标题',
-                    content: '<p>对话框将在 2秒 后关闭</p>',
-                    loading: true,
-                    onOk: () => {
-                        setTimeout(() => {
-                            this.$Modal.remove();
-                            this.$Message.info('异步关闭了对话框');
-                        }, 2000);
-                    }
-                });
+            cancel () {
+                this.$Message.info('点击了取消');
             }
         }
     }
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index 05ff0da3..29b40b22 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -1,10 +1,10 @@
 <template>
     <span>
-        <transition name="fade">
+        <transition :name="transitionNames[1]">
             <div :class="maskClasses" v-show="visible" @click="mask"></div>
         </transition>
         <div :class="wrapClasses" @click="handleWrapClick">
-            <transition name="ease">
+            <transition :name="transitionNames[0]">
                 <div :class="classes" :style="mainStyles" v-show="visible">
                     <div :class="[prefixCls + '-content']">
                         <a :class="[prefixCls + '-close']" v-if="closable" @click="close">
@@ -82,6 +82,12 @@
             scrollable: {
                 type: Boolean,
                 default: false
+            },
+            transitionNames: {
+                type: Array,
+                default () {
+                    return ['ease', 'fade'];
+                }
             }
         },
         data () {