diff --git a/components/alert/demo/basic.md b/components/alert/demo/basic.md
index eecfe6289..7cf9d4e45 100644
--- a/components/alert/demo/basic.md
+++ b/components/alert/demo/basic.md
@@ -2,7 +2,7 @@
 
 - order: 0
 
-最简单的用法。
+最简单的用法，适用于简短的警告提示。
 
 ---
 
diff --git a/components/alert/demo/close-type.md b/components/alert/demo/close-type.md
index 5519163c3..3db2b2cc6 100644
--- a/components/alert/demo/close-type.md
+++ b/components/alert/demo/close-type.md
@@ -1,20 +1,21 @@
-# 自定义关闭的文字
+# 自定义关闭
 
 - order: 3
 
-可以自定义关闭的文字，自定义的文字会替换原先的关闭 `Icon`，当警告提示含有标题时，关闭样式只能为默认值。
+可以自定义关闭，自定义的文字会替换原先的关闭 `Icon`，当警告提示含有标题时，关闭样式只能为默认值。
 
 ---
 
 ````jsx
 var Alert = require('antd/lib/alert');
+var link = <a href="javascript:;">不再提醒</a>
 
 React.render(
   <div>
     <Alert
       description="警告提示的文案"
       type="info"
-      closeText="自定义关闭文字"
+      closeText={link}
     />
   </div>,
 document.getElementById('components-alert-demo-close-type'));
diff --git a/components/alert/demo/callback.md b/components/alert/demo/onClose.md
similarity index 79%
rename from components/alert/demo/callback.md
rename to components/alert/demo/onClose.md
index 4ab0fab41..81dbdc271 100644
--- a/components/alert/demo/callback.md
+++ b/components/alert/demo/onClose.md
@@ -9,7 +9,7 @@
 ````jsx
 var Alert = require('antd/lib/alert');
 
-var callback = function(){
+var onClose = function(){
   console.log('我要被关闭啦！');
 }
 
@@ -18,14 +18,14 @@ React.render(
     <Alert
       description="警告提示的文案"
       type="warn"
-      callback={callback}
+      onClose={onClose}
     />
     <Alert
       message="警告提示的标题"
       description="警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案警告提示的文案"
       type="error"
-      callback={callback}
+      onClose={onClose}
     />
   </div>,
-document.getElementById('components-alert-demo-callback'));
+document.getElementById('components-alert-demo-onclose'));
 ````
diff --git a/components/alert/index.jsx b/components/alert/index.jsx
index 28e933eca..9129bc082 100644
--- a/components/alert/index.jsx
+++ b/components/alert/index.jsx
@@ -8,8 +8,8 @@ export default React.createClass({
     return {display: 'block'};
   },
   handleClose () {
-    if (this.props.callback) {
-      this.props.callback();
+    if (this.props.onClose) {
+      this.props.onClose();
     }
     this.setState({
       display: 'none'
@@ -37,7 +37,9 @@ export default React.createClass({
           <i className={'anticon ' + iconClass}></i>
           <p className={'ant-alert-with-message-message'}>{this.props.message}</p>
           <span className={'ant-alert-with-message-description'}>{this.props.description}</span>
-          <i onClick={this.handleClose} className={'anticon anticon-cross ant-alert-with-message-close-icon'}></i>
+          <a onClick={this.handleClose} className={'ant-alert-with-message-close-icon'}>
+            <span className='ant-alert-with-message-close-icon-x'></span>
+          </a>
         </div>
       );
     } else {
@@ -46,7 +48,7 @@ export default React.createClass({
           <div style={{display: this.state.display}} className={'ant-alert ant-alert-' + this.props.type}>
             <i className={'anticon ' + iconClass}></i>
             <span className={'ant-alert-description'}>{this.props.description}</span>
-            <a onClick={this.handleClose} className={'ant-alert-close-text'}>{this.props.closeText}</a>
+            <span onClick={this.handleClose} className={'ant-alert-close-text'}>{this.props.closeText}</span>
           </div>
         );
       } else {
@@ -54,7 +56,9 @@ export default React.createClass({
           <div style={{display: this.state.display}} className={'ant-alert ant-alert-' + this.props.type}>
             <i className={'anticon ' + iconClass}></i>
             <span className={'ant-alert-description'}>{this.props.description}</span>
-            <i onClick={this.handleClose} className={'anticon anticon-cross ant-alert-close-icon'}></i>
+            <a onClick={this.handleClose} className={'ant-alert-close-icon'}>
+              <span className='ant-alert-close-icon-x'></span>
+            </a>
           </div>
         );
       }
diff --git a/components/alert/index.md b/components/alert/index.md
index c81ed247b..f298f5f69 100644
--- a/components/alert/index.md
+++ b/components/alert/index.md
@@ -16,7 +16,7 @@
 | 参数        | 说明                                                      | 类型        | 默认值 |
 |----------- |---------------------------------------------------------  | ---------- |-------|
 | type       | 必选参数，指定警告提示的样式，有四种选择`success`、`info`、`warn`、`error`   | String     | 无    |
-| closeText | 可选参数，关闭的文字                                       | String     | 无  |
+| closeText  | 可选参数，自定义关闭                                      | String     | 无  |
 | message    | 可选参数，标题                                           | String     | 无    |
 | description | 必选参数，内容                                           | String     | 无    |
-| callback   | 可选参数，关闭时触发的回调函数                             | Function    | 无    |
+| onClose     | 可选参数，关闭时触发的回调函数                             | Function    | 无    |
diff --git a/style/components/alert.less b/style/components/alert.less
index 4b2e63392..63a88c0f7 100644
--- a/style/components/alert.less
+++ b/style/components/alert.less
@@ -28,16 +28,6 @@
     .anticon {
       color: @success-color;
     }
-    .anticon.ant-alert-close-icon {
-      color: @legend-color;
-
-      &:active {
-        color: shade(@primary-color, 5%);
-      }
-      &:hover {
-        color: tint(@primary-color, 5%);
-      }
-    }
   }
 
   &-info {
@@ -46,16 +36,6 @@
     .anticon {
       color: @primary-color;
     }
-    .anticon.ant-alert-close-icon {
-      color: @legend-color;
-
-      &:active {
-        color: shade(@primary-color, 5%);
-      }
-      &:hover {
-        color: tint(@primary-color, 5%);
-      }
-    }
   }
 
   &-warn {
@@ -64,16 +44,6 @@
     .anticon {
       color: @warning-color;
     }
-    .anticon.ant-alert-close-icon {
-      color: @legend-color;
-
-      &:active {
-        color: shade(@primary-color, 5%);
-      }
-      &:hover {
-        color: tint(@primary-color, 5%);
-      }
-    }
   }
 
   &-error {
@@ -82,34 +52,41 @@
     .anticon {
       color: @error-color;
     }
-    .anticon.ant-alert-close-icon {
-      color: @legend-color;
-
-      &:active {
-        color: shade(@primary-color, 5%);
-      }
-      &:hover {
-        color: tint(@primary-color, 5%);
-      }
-    }
   }
 
   &-close-icon {
     .iconfont-size-under-12px(10px);
-    cursor: pointer;
-    float: right;
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    margin-top: -6px;
+    filter: alpha(opacity=20);
+    opacity: .2;
+    transition: opacity .3s ease;
+    width: 12px;
+    height: 12px;
+    overflow: hidden;
+
+    &-x {
+      position: absolute;
+      top: -3px;
+      &:before {
+        font-weight: 700;
+        text-shadow: 0 1px 0 #fff;
+        color: #000;
+        content: "\e61e";
+        font-family: "anticon";
+      }
+    }
+
+    &:hover {
+      opacity: 1;
+      filter: alpha(opacity=100);
+    }
   }
 
   &-close-text {
-    cursor: pointer;
     float: right;
-    color: @legend-color;
-    &:active {
-      color: shade(@primary-color, 5%);
-    }
-    &:hover {
-      color: tint(@primary-color, 5%);
-    }
   }
 }
 
@@ -151,16 +128,6 @@
     .anticon {
       color: @success-color;
     }
-    .anticon.ant-alert-with-message-close-icon {
-      color: @legend-color;
-
-      &:active {
-        color: shade(@primary-color, 5%);
-      }
-      &:hover {
-        color: tint(@primary-color, 5%);
-      }
-    }
   }
 
   &-info {
@@ -169,16 +136,6 @@
     .anticon {
       color: @primary-color;
     }
-    .anticon.ant-alert-with-message-close-icon {
-      color: @legend-color;
-
-      &:active {
-        color: shade(@primary-color, 5%);
-      }
-      &:hover {
-        color: tint(@primary-color, 5%);
-      }
-    }
   }
 
   &-warn {
@@ -187,16 +144,6 @@
     .anticon {
       color: @warning-color;
     }
-    .anticon.ant-alert-with-message-close-icon {
-      color: @legend-color;
-
-      &:active {
-        color: shade(@primary-color, 5%);
-      }
-      &:hover {
-        color: tint(@primary-color, 5%);
-      }
-    }
   }
 
   &-error {
@@ -205,15 +152,40 @@
     .anticon {
       color: @error-color;
     }
-    .anticon.ant-alert-with-message-close-icon {
-      color: @legend-color;
+  }
 
-      &:active {
-        color: shade(@primary-color, 5%);
-      }
-      &:hover {
-        color: tint(@primary-color, 5%);
+  &-close-icon {
+    .iconfont-size-under-12px(10px);
+    float: right;
+    filter: alpha(opacity=20);
+    opacity: .2;
+    transition: opacity .3s ease;
+    width: 12px;
+    height: 12px;
+    overflow: hidden;
+    position: absolute;
+    right: 16px;
+    top: 12px;
+
+    &-x {
+      position: absolute;
+      top: -4px;
+      &:before {
+        font-weight: 700;
+        text-shadow: 0 1px 0 #fff;
+        color: #000;
+        content: "\e61e";
+        font-family: "anticon";
       }
     }
+
+    &:hover {
+      opacity: 1;
+      filter: alpha(opacity=100);
+    }
+  }
+
+  &-close-text {
+    float: right;
   }
 }
\ No newline at end of file