首页 > Web开发 > 详细

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

时间:2017-11-21 13:49:58      阅读:154      评论:0      收藏:0      [点我收藏+]
主要的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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!