jquery消息提示框

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

用于ajax类型提示的，只显示一个。

只是给个思路而已，代码有很多不足。

4个参数，有2个是可选

调用

$.mTip('类型','显示内容',显示时间,回调函数)

类型：

0 为加载

1 为成功

2 为失败

3 为警告

显示时间：

为整数型

大于0，

小于0或非整数一直存在，不消失！

效果图：

渣渣效果一份：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>提示框</title>
<style type="text/css">
.msgbox_layer, .msgbox_layer .gtl_ico_succ, .msgbox_layer .gtl_ico_fail, .msgbox_layer .gtl_ico_hits, .msgbox_layer .gtl_ico_clear, .msgbox_layer .gtl_end {background-image: url("images/gb_tip_layer.png");background-repeat: no-repeat;color: #606060;display: inline-block;font-size: 14px;font-weight: bold;height: 54px;line-height: 54px;}
.msgbox_layer_wrap {left: 0;position: fixed;_position: absolute;_top: expression(documentElement.clientHeight/2 + documentElement.scrollTop + "px");text-align: center;top: 46%;width: 100%;z-index: 65533;}
.msgbox_layer {background-position: 0 -161px;background-repeat: repeat-x;margin: 0 auto;padding: 0 18px 0 9px;position: relative;}
.msgbox_layer .gtl_ico_succ {background-position: -6px 0;left: -45px;position: absolute;top: 0;width: 45px;}
.msgbox_layer .gtl_end {background-position: 0 0;position: absolute;right: -6px;top: 0;width: 6px;}
.msgbox_layer .gtl_ico_fail {background-position: -6px -108px;left: -45px;position: absolute;top: 0;width: 45px;}
.msgbox_layer .gtl_ico_hits {background-position: -6px -54px;left: -45px;position: absolute;top: 0;width: 45px;}
.msgbox_layer .gtl_ico_clear {background-position: -6px 0;left: -5px;position: absolute;top: 0;width: 5px;}
.msgbox_layer img {float: left;margin: 19px 10px 0 5px;width: 16px;height: 16px;}
.manhuaTip{ width:80px; height:40px; line-height:40px; text-align:center; border:1px #999999 solid; background:#82ce18; margin-right:50px; font-size:16px; font-weight:bold; letter-spacing:2px; cursor:pointer; color:#FFF; }
</style>
</head>
<body><input type="button" value='加载中' id="demo">
<input type="button" value='成功' id="demo2">
<input type="button" value='失败' id="demo3">
<input type="button" value='警告' id="demo4"><script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$("#demo").click(function(){
$.mTip('0','加载中',0);
});
$("#demo2").click(function(){
$.mTip('1','成功',0);
});
$("#demo3").click(function(){
$.mTip('2','失败',0);
});
$("#demo4").click(function(){
$.mTip('3','警告',0);
}); function log(a){console.log(a)}
$.extend({
mTip:function(type,txt,time,callback){ if($("#mTip").length){
$("#mTip").remove();
} var arrayHTML = [
'<img alt="" src="data:images/loading.gif">',
'<span class="gtl_ico_succ"></span>',
'<span class="gtl_ico_fail"></span>',
'<span class="gtl_ico_hits"></span>'
];
var temp = type ? arrayHTML[type] : arrayHTML[0];
var html = '<div id="mTip" class="msgbox_layer_wrap"><span id="mode_tips_v2" style="z-index: 10000;" class="msgbox_layer"><span class="gtl_ico_clear"></span>';
html+= arrayHTML[type] + txt + '<span class="gtl_end"></span></span></div>';
$("body").append(html);
if(typeof time == 'number'){
if(time > 0){
setTimeout(function(){
$("#mTip").remove();
if(callback){
callback();
}
},time);
}else{
setTimeout(function(){
if(callback){
callback();
}
},100); }
}
}
}); </script>
</body>
</html>