主要的jquery代码:
var TS={ successAlert:function(str){ //调用成功的方法 var html=‘<div class="alert alert-success ts-alert" >‘ +‘<span class="ts-alert-text">‘+str+‘</span>‘ +‘<button type="button" class="close"><span>×</span></button></div>‘; var obj=$(html); obj.appendTo(document.body); var w=obj.width(); if(w>1) w=w/2; //提示框居中显示 obj.css("margin-left", "-"+w+"px"); //延时自动关闭 setTimeout(function () { obj.remove(); }, 3000); }, errorAlert:function(str){ //调用失败的方法 var html=‘<div class="alert alert-danger ts-alert" >‘ +‘<span class="ts-alert-text">‘+str+‘</span>‘ +‘<button type="button" class="close"><span>×</span></button></div>‘; var obj=$(html); obj.appendTo(document.body); var w=obj.width(); if(w>1) w=w/2; obj.css("margin-left", "-"+w+"px"); setTimeout(function () { obj.remove(); }, 3000); }, loadingAlert:function(str){ $(‘<div class="alert alert-info ts-alert" >‘+str+‘</div>‘).appendTo(document.body); }, removeAlert:function(obj){ $(obj).remove(); } } $(function(){ $(document).on("click",".close",function(){ var obj=$(this).parents(".ts-alert"); obj.remove(); }); });
主要的css样式:
/*****tsalert提示窗******/
.ts-alert{
position:fixed;
top:50px;
left:50%;
z-index:999;
white-space: normal;
min-width: 200px;
text-align: center;
padding: 15px;
padding-right: 15px;
margin-bottom: 20px;
border:1px solid #e0e0e0;
border-radius: 4px;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
}
.ts-alert-text{
text-align:center;
font-weight:bold;
white-space: normal;
line-height:24px;
}
button.close {
-webkit-appearance: none;
padding: 0;
cursor: pointer;
background: 0 0;
border: 0;
float: right;
font-size: 21px;
font-weight: 700;
line-height: 1;
text-shadow: 0 1px 0 #fff;
color:#222;
margin-left:5px;
line-height:26px;
}
实现的效果:

用户可以点击×来去除提示框,也可以等到一定时间自动消失,自动消失时间可以自己设置,采用的是settimeout方法。
方法调用为:TS.successAlert("关联模板成功!");其中需要显示的内容可以自己修改 。
原文:http://www.cnblogs.com/opel/p/7872520.html