diff --git a/examples/routers/modal.vue b/examples/routers/modal.vue
index 08c43c4a..23e6a6d0 100644
--- a/examples/routers/modal.vue
+++ b/examples/routers/modal.vue
@@ -1,22 +1,150 @@
 <template>
     <div>
-        <Button @click="modal12 = true">Open the first modal</Button>
-        <Button @click="modal13 = true">Open the second modal</Button>
-        <Modal v-model="modal12" draggable scrollable title="Modal 1">
-            <div>This is the first modal</div>
-        </Modal>
-        <Modal v-model="modal13" draggable scrollable title="Modal 2">
-            <div>This is the second modal</div>
+        <Button type="primary" @click="modal1 = true">Display dialog box</Button>
+        <Modal
+                v-model="modal1"
+                title="Common Modal dialog box title"
+                @on-ok="ok"
+                @on-cancel="cancel">
+            <p>Content of dialog</p>
+            <p>Content of dialog</p>
+            <p>Content of dialog</p>
+            <Button @click="openMessage">Message</Button>
+            <Select v-model="model1" style="width:200px" :transfer="false">
+                <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+            </Select>
+            <Select v-model="model1" style="width:200px" :transfer="true">
+                <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+            </Select>
+            <Dropdown transfer>
+                <a href="javascript:void(0)">
+                    下拉菜单
+                    <Icon type="ios-arrow-down"></Icon>
+                </a>
+                <DropdownMenu slot="list">
+                    <DropdownItem>驴打滚</DropdownItem>
+                    <DropdownItem>炸酱面</DropdownItem>
+                    <DropdownItem disabled>豆汁儿</DropdownItem>
+                    <DropdownItem>冰糖葫芦</DropdownItem>
+                    <DropdownItem divided>北京烤鸭</DropdownItem>
+                </DropdownMenu>
+            </Dropdown>
+            <DatePicker type="date" placeholder="Select date" style="width: 200px" transfer></DatePicker>
+            <Cascader :data="data" v-model="value1" transfer></Cascader>
+            <Tooltip content="Here is the prompt text" transfer>
+                A balloon appears when the mouse passes over this text
+            </Tooltip>
+            <Poptip trigger="hover" title="Title" content="content" transfer>
+                <Button>Hover</Button>
+            </Poptip>
+            <Button type="primary" @click="handleSpinShow">整页显示，3秒后关闭</Button>
         </Modal>
+        <Select v-model="model1" style="width:200px" :transfer="false">
+            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+        </Select>
+        <Select v-model="model1" style="width:200px" :transfer="true">
+            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+        </Select>
     </div>
 </template>
 <script>
     export default {
         data () {
             return {
-                modal12: false,
-                modal13: false
+                modal1: false,
+                cityList: [
+                    {
+                        value: 'New York',
+                        label: 'New York'
+                    },
+                    {
+                        value: 'London',
+                        label: 'London'
+                    },
+                    {
+                        value: 'Sydney',
+                        label: 'Sydney'
+                    },
+                    {
+                        value: 'Ottawa',
+                        label: 'Ottawa'
+                    },
+                    {
+                        value: 'Paris',
+                        label: 'Paris'
+                    },
+                    {
+                        value: 'Canberra',
+                        label: 'Canberra'
+                    }
+                ],
+                model1: '',
+                value1: [],
+                data: [{
+                    value: 'beijing',
+                    label: '北京',
+                    children: [
+                        {
+                            value: 'gugong',
+                            label: '故宫'
+                        },
+                        {
+                            value: 'tiantan',
+                            label: '天坛'
+                        },
+                        {
+                            value: 'wangfujing',
+                            label: '王府井'
+                        }
+                    ]
+                }, {
+                    value: 'jiangsu',
+                    label: '江苏',
+                    children: [
+                        {
+                            value: 'nanjing',
+                            label: '南京',
+                            children: [
+                                {
+                                    value: 'fuzimiao',
+                                    label: '夫子庙',
+                                }
+                            ]
+                        },
+                        {
+                            value: 'suzhou',
+                            label: '苏州',
+                            children: [
+                                {
+                                    value: 'zhuozhengyuan',
+                                    label: '拙政园',
+                                },
+                                {
+                                    value: 'shizilin',
+                                    label: '狮子林',
+                                }
+                            ]
+                        }
+                    ],
+                }]
             }
+        },
+        methods: {
+            ok () {
+//                this.$Message.info('Clicked ok');
+            },
+            cancel () {
+//                this.$Message.info('Clicked cancel');
+            },
+            openMessage () {
+                this.$Message.info({
+                    content: 'hello world',
+                    duration: 2
+                });
+            },
+            handleSpinShow () {
+                this.$Spin.show();
+            },
         }
     }
 </script>
diff --git a/src/components/base/notification/notification.vue b/src/components/base/notification/notification.vue
index 175a611b..195a551b 100644
--- a/src/components/base/notification/notification.vue
+++ b/src/components/base/notification/notification.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="classes" :style="styles">
+    <div :class="classes" :style="wrapStyles">
         <Notice
             v-for="notice in notices"
             :key="notice.name"
@@ -21,6 +21,8 @@
 <script>
     import Notice from './notice.vue';
 
+    import { transferIndex, transferIncrease } from '../../../utils/transfer-queue';
+
     const prefixCls = 'ivu-notification';
     let seed = 0;
     const now = Date.now();
@@ -54,7 +56,8 @@
         },
         data () {
             return {
-                notices: []
+                notices: [],
+                tIndex: this.handleGetIndex()
             };
         },
         computed: {
@@ -65,6 +68,12 @@
                         [`${this.className}`]: !!this.className
                     }
                 ];
+            },
+            wrapStyles () {
+                let styles = Object.assign({}, this.styles);
+                styles['z-index'] = 1010 + this.tIndex;
+
+                return styles;
             }
         },
         methods: {
@@ -82,6 +91,7 @@
                 }, notice);
 
                 this.notices.push(_notice);
+                this.tIndex = this.handleGetIndex();
             },
             close (name) {
                 const notices = this.notices;
@@ -94,7 +104,11 @@
             },
             closeAll () {
                 this.notices = [];
-            }
+            },
+            handleGetIndex () {
+                transferIncrease();
+                return transferIndex;
+            },
         }
     };
 </script>
diff --git a/src/components/base/popper.js b/src/components/base/popper.js
index f7dc6b2d..e9f57718 100644
--- a/src/components/base/popper.js
+++ b/src/components/base/popper.js
@@ -60,6 +60,7 @@ export default {
         },
         visible(val) {
             if (val) {
+                this.handleIndexIncrease();  // just use for Poptip
                 this.updatePopper();
                 this.$emit('on-popper-show');
             } else {
diff --git a/src/components/cascader/cascader.vue b/src/components/cascader/cascader.vue
index 9d1cf6b1..3b2f917a 100644
--- a/src/components/cascader/cascader.vue
+++ b/src/components/cascader/cascader.vue
@@ -26,6 +26,7 @@
                 :class="{ [prefixCls + '-transfer']: transfer }"
                 ref="drop"
                 :data-transfer="transfer"
+                :transfer="transfer"
                 v-transfer-dom>
                 <div>
                     <Caspanel
diff --git a/src/components/color-picker/color-picker.vue b/src/components/color-picker/color-picker.vue
index ad2cc599..dfc0c1a7 100644
--- a/src/components/color-picker/color-picker.vue
+++ b/src/components/color-picker/color-picker.vue
@@ -40,6 +40,7 @@
                 ref="drop"
                 :placement="placement"
                 :data-transfer="transfer"
+                :transfer="transfer"
                 :class="dropClasses"
             >
                 <transition name="fade">
diff --git a/src/components/date-picker/picker.vue b/src/components/date-picker/picker.vue
index f15f3aa9..e359343c 100644
--- a/src/components/date-picker/picker.vue
+++ b/src/components/date-picker/picker.vue
@@ -39,6 +39,7 @@
                 :placement="placement"
                 ref="drop"
                 :data-transfer="transfer"
+                :transfer="transfer"
                 v-transfer-dom>
                 <div>
                     <component
diff --git a/src/components/dropdown/dropdown.vue b/src/components/dropdown/dropdown.vue
index 3deca516..0f3509a9 100644
--- a/src/components/dropdown/dropdown.vue
+++ b/src/components/dropdown/dropdown.vue
@@ -14,6 +14,7 @@
                 @mouseenter.native="handleMouseenter"
                 @mouseleave.native="handleMouseleave"
                 :data-transfer="transfer"
+                :transfer="transfer"
                 v-transfer-dom><slot name="list"></slot></Drop>
         </transition>
     </div>
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index 596f4fae..07eb0a8b 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -40,7 +40,7 @@
     import { on, off } from '../../utils/dom';
     import { findComponentsDownward } from '../../utils/assist';
 
-    import { modalIndex, modalIncrease } from './q';
+    import { transferIndex as modalIndex, transferIncrease as modalIncrease } from '../../utils/transfer-queue';
 
     const prefixCls = 'ivu-modal';
 
@@ -325,7 +325,9 @@
                 return modalIndex;
             },
             handleClickModal () {
-                this.modalIndex = this.handleGetModalIndex();
+                if (this.draggable) {
+                    this.modalIndex = this.handleGetModalIndex();
+                }
             }
         },
         mounted () {
diff --git a/src/components/modal/q.js b/src/components/modal/q.js
deleted file mode 100644
index c72b70f0..00000000
--- a/src/components/modal/q.js
+++ /dev/null
@@ -1,7 +0,0 @@
-let modalIndex = 0;
-
-function modalIncrease() {
-    modalIndex++;
-}
-
-export {modalIndex, modalIncrease};
\ No newline at end of file
diff --git a/src/components/poptip/poptip.vue b/src/components/poptip/poptip.vue
index cc57fea8..184473fe 100644
--- a/src/components/poptip/poptip.vue
+++ b/src/components/poptip/poptip.vue
@@ -52,6 +52,7 @@
     import {directive as clickOutside} from 'v-click-outside-x';
     import TransferDom from '../../directives/transfer-dom';
     import { oneOf } from '../../utils/assist';
+    import { transferIndex, transferIncrease } from '../../utils/transfer-queue';
     import Locale from '../../mixins/locale';
 
     const prefixCls = 'ivu-poptip';
@@ -118,6 +119,7 @@
                 showTitle: true,
                 isInput: false,
                 disableCloseUnderTransfer: false,  // transfer 模式下，点击 slot 也会触发关闭
+                tIndex: this.handleGetIndex()
             };
         },
         computed: {
@@ -144,6 +146,9 @@
                 if (this.width) {
                     style.width = `${this.width}px`;
                 }
+
+                if (this.transfer) style['z-index'] = 1060 + this.tIndex;
+
                 return style;
             },
             localeOkText () {
@@ -172,7 +177,7 @@
                 const styles = {};
                 if (this.padding !== '') styles['padding'] = this.padding;
                 return styles;
-            }
+            },
         },
         methods: {
             handleClick () {
@@ -254,6 +259,13 @@
                 }
 
                 return $children;
+            },
+            handleGetIndex () {
+                transferIncrease();
+                return transferIndex;
+            },
+            handleIndexIncrease () {
+                this.tIndex = this.handleGetIndex();
             }
         },
         mounted () {
diff --git a/src/components/select/dropdown.vue b/src/components/select/dropdown.vue
index d54b1211..c36bb286 100644
--- a/src/components/select/dropdown.vue
+++ b/src/components/select/dropdown.vue
@@ -7,6 +7,8 @@
     import { getStyle } from '../../utils/assist';
     const Popper = isServer ? function() {} : require('popper.js/dist/umd/popper.js');  // eslint-disable-line
 
+    import { transferIndex, transferIncrease } from '../../utils/transfer-queue';
+
     export default {
         name: 'Drop',
         props: {
@@ -16,19 +18,26 @@
             },
             className: {
                 type: String
+            },
+            transfer: {
+                type: Boolean
             }
         },
         data () {
             return {
                 popper: null,
                 width: '',
-                popperStatus: false
+                popperStatus: false,
+                tIndex: this.handleGetIndex()
             };
         },
         computed: {
             styles () {
                 let style = {};
                 if (this.width) style.minWidth = `${this.width}px`;
+
+                if (this.transfer) style['z-index'] = 1060 + this.tIndex;
+
                 return style;
             }
         },
@@ -66,6 +75,7 @@
                 if (this.$parent.$options.name === 'iSelect') {
                     this.width = parseInt(getStyle(this.$parent.$el, 'width'));
                 }
+                this.tIndex = this.handleGetIndex();
             },
             destroy () {
                 if (this.popper) {
@@ -89,7 +99,11 @@
                 if(!leftOrRight){
                     this.popper.popper.style.transformOrigin = placementStart==='bottom' || ( placementStart !== 'top' && placementEnd === 'start') ? 'center top' : 'center bottom';
                 }
-            }
+            },
+            handleGetIndex () {
+                transferIncrease();
+                return transferIndex;
+            },
         },
         created () {
             this.$on('on-update-popper', this.update);
diff --git a/src/components/select/select.vue b/src/components/select/select.vue
index 306376d0..3857089a 100644
--- a/src/components/select/select.vue
+++ b/src/components/select/select.vue
@@ -54,6 +54,7 @@
                 :placement="placement"
                 ref="dropdown"
                 :data-transfer="transfer"
+                :transfer="transfer"
                 v-transfer-dom
             >
                 <ul v-show="showNotFoundLabel" :class="[prefixCls + '-not-found']"><li>{{ localeNotFoundText }}</li></ul>
diff --git a/src/components/spin/spin.js b/src/components/spin/spin.js
index 479496b6..6190e4a2 100644
--- a/src/components/spin/spin.js
+++ b/src/components/spin/spin.js
@@ -1,6 +1,15 @@
 import Vue from 'vue';
 import Spin from './spin.vue';
 
+import { transferIndex, transferIncrease } from '../../utils/transfer-queue';
+
+function handleGetIndex() {
+    transferIncrease();
+    return transferIndex;
+}
+
+let tIndex = handleGetIndex();
+
 Spin.newInstance = properties => {
     const _props = properties || {};
 
@@ -27,7 +36,10 @@ Spin.newInstance = properties => {
                 });
             }
             return h('div', {
-                'class': 'ivu-spin-fullscreen ivu-spin-fullscreen-wrapper'
+                'class': 'ivu-spin-fullscreen ivu-spin-fullscreen-wrapper',
+                'style': {
+                    'z-index': 2010 + tIndex
+                }
             }, [vnode]);
         }
     });
@@ -39,6 +51,7 @@ Spin.newInstance = properties => {
     return {
         show () {
             spin.visible = true;
+            tIndex = handleGetIndex();
         },
         remove (cb) {
             spin.visible = false;
diff --git a/src/components/tooltip/tooltip.vue b/src/components/tooltip/tooltip.vue
index 2b0fa51a..bae0dcf1 100644
--- a/src/components/tooltip/tooltip.vue
+++ b/src/components/tooltip/tooltip.vue
@@ -6,6 +6,7 @@
         <transition name="fade">
             <div
                 :class="[prefixCls + '-popper', prefixCls + '-' + theme]"
+                :style="dropStyles"
                 ref="popper"
                 v-show="!disabled && (visible || always)"
                 @mouseenter="handleShowPopper"
@@ -24,6 +25,7 @@
     import Popper from '../base/popper';
     import TransferDom from '../../directives/transfer-dom';
     import { oneOf } from '../../utils/assist';
+    import { transferIndex, transferIncrease } from '../../utils/transfer-queue';
 
     const prefixCls = 'ivu-tooltip';
 
@@ -76,7 +78,8 @@
         },
         data () {
             return {
-                prefixCls: prefixCls
+                prefixCls: prefixCls,
+                tIndex: this.handleGetIndex()
             };
         },
         computed: {
@@ -92,6 +95,12 @@
                         [`${prefixCls}-inner-with-width`]: !!this.maxWidth
                     }
                 ];
+            },
+            dropStyles () {
+                let styles = {};
+                if (this.transfer) styles['z-index'] = 1060 + this.tIndex;
+
+                return styles;
             }
         },
         watch: {
@@ -105,6 +114,7 @@
                 this.timeout = setTimeout(() => {
                     this.visible = true;
                 }, this.delay);
+                this.tIndex = this.handleGetIndex();
             },
             handleClosePopper() {
                 if (this.timeout) {
@@ -115,7 +125,11 @@
                         }, 100);
                     }
                 }
-            }
+            },
+            handleGetIndex () {
+                transferIncrease();
+                return transferIndex;
+            },
         },
         mounted () {
             if (this.always) {
diff --git a/src/utils/transfer-queue.js b/src/utils/transfer-queue.js
new file mode 100644
index 00000000..b11bdf7c
--- /dev/null
+++ b/src/utils/transfer-queue.js
@@ -0,0 +1,7 @@
+let transferIndex = 0;
+
+function transferIncrease() {
+    transferIndex++;
+}
+
+export {transferIndex, transferIncrease};
\ No newline at end of file