diff --git a/examples/routers/modal.vue b/examples/routers/modal.vue
index aab13711..58a893ba 100644
--- a/examples/routers/modal.vue
+++ b/examples/routers/modal.vue
@@ -1,44 +1,30 @@
 <template>
     <div>
-        <Button @click="instance('info')">Info</Button>
-        <Button @click="instance('success')">Success</Button>
-        <Button @click="instance('warning')">Warning</Button>
-        <Button @click="instance('error')">Error</Button>
+        <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>
+        </Modal>
     </div>
 </template>
 <script>
     export default {
+        data () {
+            return {
+                modal1: false
+            }
+        },
         methods: {
-            instance (type) {
-                const title = 'Title';
-                const content = '<p>Content of dialog</p><p>Content of dialog</p>';
-                switch (type) {
-                    case 'info':
-                        this.$Modal.info({
-                            title: title,
-                            content: content,
-                            closable: true
-                        });
-                        break;
-                    case 'success':
-                        this.$Modal.success({
-                            title: title,
-                            content: content
-                        });
-                        break;
-                    case 'warning':
-                        this.$Modal.warning({
-                            title: title,
-                            content: content
-                        });
-                        break;
-                    case 'error':
-                        this.$Modal.error({
-                            title: title,
-                            content: content
-                        });
-                        break;
-                }
+            ok () {
+                this.$Message.info('Clicked ok');
+            },
+            cancel () {
+                this.$Message.info('Clicked cancel');
             }
         }
     }
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index 6f01c9eb..09478b31 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -9,7 +9,7 @@
                     <div :class="[prefixCls + '-content']">
                         <a :class="[prefixCls + '-close']" v-if="closable" @click="close">
                             <slot name="close">
-                                <Icon type="ios-close-empty"></Icon>
+                                <Icon type="ios-close"></Icon>
                             </slot>
                         </a>
                         <div :class="[prefixCls + '-header']" v-if="showHead"><slot name="header"><div :class="[prefixCls + '-header-inner']">{{ title }}</div></slot></div>