jquery 实现一个简单的成功提示框，失败提示框

Posted 2020-10-15 oubao

主要的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("关联模板成功！");其中需要显示的内容可以自己修改 。