jquery 實現一個簡單的成功提示框,失敗提示框


主要的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("關聯模板成功!");其中需要顯示的內容可以自己修改 。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM