主要的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("关联模板成功!");其中需要显示的内容可以自己修改 。
jquery 实现一个简单的成功提示框,失败提示框
原文地址:http://www.cnblogs.com/opel/p/7872520.html