在实际项目中，很容易有这种需求：当某个操作成功或失败，需要给用户一个提示。当然最简单的做法是调用alert()方法弹窗。但alert()属于JavaScript中BOM部分，每个浏览器的样式不太一样，这个我们改变不了。另外，弹窗给用户的感觉也不是很好。还需要手动关闭一次。
鉴于以上的理由，自己实现个弹出提示很有必要。本文的实现是基于jquery的，是一款jquery插件，可以直接用，弹出后，定时消失。弹窗样式不符合需求的，可以修改的。
效果：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.ui-poptips {
100%;
position: fixed;
top: 50%;
left: 0;
z-index: 10000;
text-align: center;
}
.ui-poptips .ui-poptips-cnt {
margin: 0 auto;
padding: 4px 15px;
background-color: rgba(102, 102, 102, .8);
line-height: 36px;
height: 36px;
color: #fff;
font-size: 15px;
text-align: center;
/*border-bottom-left-radius: 3px;*/
/*border-bottom-right-radius: 3px;*/
border-radius: 3px;
overflow: hidden;
}
.ui-poptips-success i:before {
background-position: -25px -50px
}
</style>
</head>
<body>
<div id="div1">点我</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
//jquery插件代码，一般作为一个独立的文件引入。这里直接写了。
$.fn.tips=function(content){
var tips=$(this);
$(tips).append('<div class="ui-poptips ui-poptips-success am-animation-fade" > <span class="ui-poptips-cnt">'+content+'</span> </div>');
setTimeout(function(){$("div.ui-poptips").remove();},3000);
}
</script>
<script>
$('#div1').bind('click',function(){
$('body').tips('div1被点击了');
})
</script>
</body>
</html>