Bootstrap告警框（alert）实现弹出效果和短暂显示后上浮消失的示例代码
最近用到bootstrap的告警框时发现只有html的说明，就自己写了一个弹出告警框和弹出短暂显示后上浮消失的告警框。
使用效果
移入时停止上浮的效果
直接上JS代码了，可以copy过去直接用（使用bootstrap的UI框架的情况下）
varcommonUtil={
/**
*弹出消息框
*@parammsg消息内容
*@paramtype消息框类型（参考bootstrap的alert）
*/
alert:function(msg,type){
if(typeof(type)=="undefined"){//未传入type则默认为success类型的消息框
type="success";
}
//创建bootstrap的alert元素
vardivElement=$("").addClass('alert').addClass('alert-'+type).addClass('alert-dismissible').addClass('col-md-4').addClass('col-md-offset-4');
divElement.css({//消息框的定位样式
"position":"absolute",
"top":"80px"
});
divElement.text(msg);//设置消息框的内容
//消息框添加可以关闭按钮
varcloseBtn=$('×');
$(divElement).append(closeBtn);
//消息框放入到页面中
$('body').append(divElement);
returndivElement;
},
/**
*短暂显示后上浮消失的消息框
*@parammsg消息内容
*@paramtype消息框类型
*/
message:function(msg,type){
vardivElement=commonUtil.alert(msg,type);//生成Alert消息框
varisIn=false;//鼠标是否在消息框中
divElement.on({//在setTimeout执行之前先判定鼠标是否在消息框中
mouseover:function(){isIn=true;},
mouseout:function(){isIn=false;}
});
//短暂延时后上浮消失
setTimeout(function(){
varIntervalMS=20;//每次上浮的间隔毫秒
varfloatSpace=60;//上浮的空间(px)
varnowTop=divElement.offset().top;//获取元素当前的top值
varstopTop=nowTop-floatSpace;//上浮停止时的top值
divElement.fadeOut(IntervalMS*floatSpace);//设置元素淡出
varupFloat=setInterval(function(){//开始上浮
if(nowTop>=stopTop){//判断当前消息框top是否还在可上升的范围内
divElement.css({"top":nowTop--});//消息框的top上升1px
}else{
clearInterval(upFloat);//关闭上浮
divElement.remove();//移除元素
}
},IntervalMS);
if(isIn){//如果鼠标在setTimeout之前已经放在的消息框中，则停止上浮
clearInterval(upFloat);
divElement.stop();
}
divElement.hover(function(){//鼠标悬浮时停止上浮和淡出效果，过后恢复
clearInterval(upFloat);
divElement.stop();
},function(){
divElement.fadeOut(IntervalMS*(nowTop-stopTop));//这里设置元素淡出的时间应该为：间隔毫秒*剩余可以上浮空间
upFloat=setInterval(function(){//继续上浮
if(nowTop>=stopTop){
divElement.css({"top":nowTop--});
}else{
clearInterval(upFloat);//关闭上浮
divElement.remove();//移除元素
}
},IntervalMS);
});
},1500);
}
}
调用部分
functionlogin(){
$.ajax({
url:"/apis/login/session",
data:$('#loginForm').serialize(),
dataType:"json",
contentType:"application/json",
success:function(result){
commonUtil.message(result.message);//直接调用commonUtil对象的message方法
}
});
}
总结
到此这篇关于Bootstrap告警框（alert）实现弹出效果和短暂显示后上浮消失的文章就介绍到这了,更多相关Bootstrap告警框（alert）内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。