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="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>

下载地址：https://files.cnblogs.com/yyman001/mTip1.0.rar