很多时候，我们先要在网页中提示某些操作已经完成，或者某些状态已经改变，但是又不希望用户做多余的操作而使用户厌烦，最好是用户知道之后就自动消失。
在这个时候使用 alert 和 modal dialog 明显都不太合适，经过多方寻找，终于找到了一种比较合适的方式，这里就称呼它为 alert message 吧。
alert message 有一个特点，就是只出现一会，一会之后自动消失，而这正是我们希望要的效果，既使用户知道了状态已经变更，又不需要用户做多余操作，片刻之后就消失不见。
这里有一张图片讲解了这个特性：
要想实现这样的代码很简单，我主要将它分解为以下几个步骤：
1、 创建一个 div，先设置好位置和样式，用作后面的 "提示消息框" 2、 将 1 中的 div 的样式设置为 "display:none" 3、 创建显示 "提示消息框" 和定时函数
$(#success-alert).fadeTo(2000, 500).slideUp(500, function(){
$(#success-alert).alert('close');
});
4、 调用显示函数
示例
下面我给大家一个具体的实现代码，仅供参考：
代码：
<!DOCTYPE html>
<html lang=en>
<head>
<title>Bootstrap Example</title>
<meta charset=utf-8>
<meta name=viewport content=width=device-width, initial-scale=1>
<link rel=stylesheet href=http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css>
<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js></script>
<script src=http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js></script>
</head>
<body>
<div class=product-options>
<a id=myWish href=javascript:; class=btn btn-mini >Add to Wishlist </a>
<a href= class=btn btn-mini> Purchase </a>
</div>
<div class=alert alert-success id=success-alert>
<button type=button class=close data-dismiss=alert>x</button>
<strong>Success! </strong>
Product have added to your wishlist.
</div>
<script>
$(document).ready (function(){
$(#success-alert).hide();
$(#myWish).click(function showAlert() {
$(#success-alert).alert();
$(#success-alert).fadeTo(2000, 500).slideUp(500, function(){
$(#success-alert).alert('close');
});
});
});
</script>
</body>
</html>