用于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>

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

jquery消息提示框的更多相关文章

  1. 基于jQuery消息提示框插件Tipso

    今天要分享的这款jQuery消息提示框插件名叫Tipso,它的特点是可以定义提示框的显示位置,以及动态改变提示框的提示内容,应该说是一款相当灵活的jQuery消息提示框插件.效果图如下: 在线预览   ...

  2. jQuery消息提示框插件Tipso

    在线演示 本地下载

  3. 强大的响应式jQuery消息通知框和信息提示框插件

    lobibox是一款功能很强大的jQuery消息通知框和信息提示框插件.这个插件分为两个部分:消息通知框和信息提示框.它能很好的结合Bootstrap使用. 信息提示框 lobibox的信息提示框能够 ...

  4. jQuery EasyUI 提示框(Messager)用法

    jQuery EasyUI 提示框(Messager)不仅强大,而且也不用任何的HTML代码,只需要按照<jQuery EasyUI框架使用文档>包含必要文件后,在$(function() ...

  5. JS~Boxy和JS模版实现一个标准的消息提示框

    面向对象的封装 面向对象一个入最重要的特性就是“封装”,将一些没有必要公开的方法和属性以特定的方式进行组装,使它对外只公开一个接口,外界在调用它时,不需要关注它实现的细节,而只要关注它的方法签名即可, ...

  6. 基于jquery的提示框JavaScript 插件，类Bootstrap

    目录 基于jquery的提示框JavaScript 插件,类Bootstrap 基于jquery的提示框JavaScript 插件,类Bootstrap 源码 github地址: https://gi ...

  7. （二）easyUI之消息提示框

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  8. 自定义iOS 中推送消息 提示框

    看到标题你可能会觉得奇怪 推送消息提示框不是系统自己弹出来的吗? 为什么还要自己自定义呢? 因为项目需求是这样的:最近需要做 远程推送通知 和一个客服系统 包括店铺客服和官方客服两个模块 如果有新的消 ...

  9. Android第三方开源对话消息提示框：SweetAlertDialog（sweet-alert-dialog）

    Android第三方开源对话消息提示框:SweetAlertDialog(sweet-alert-dialog) Android第三方开源对话消息提示框:SweetAlertDialog(sweet- ...

随机推荐

  1. 最新微信小程序（应用号）视频教程，实战教程

    1.1课程介绍,定个小目标            http://v.youku.com/v_show/id_XMTc2NzIwNDk1Ng==.html 1.2开发文档简读,了解全貌       ht ...

  2. 百度地图整合功能分享修正版[ZMap.js] 实例源码!

    ZMap 功能说明 ZMap 是学习百度地图 api 接口,开发基本功能后整的一个脚本类,本类方法功能大多使用 prototype 原型 实现: 包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐标是 ...

  3. 【Moqui业务逻辑翻译系列】Shipment Receiver Receives Shipment with Packing Slip but no PO

    Shipment Receiver receives shipment. It has invoice tucked into it. Receiver records vendor name, ve ...

  4. MongoDB 2.6设置访问权限、设置用户

    MongoDB已经使用很长一段时间了,基于MongoDB的数据存储也一直没有使用到权限访问(MongoDB默认设置为无权限访问限制),今天特地花了一点时间研究了一下,研究成果如下: 注:研究成果基于W ...

  5. 使用Web Deploy进行远程部署

    Web Deploy支持直接从本地Visual Studio的工程文件部署网站到远程服务器,部署的过程中可以对比哪些文件变化了需要拷贝,而不是一股脑的全部拷贝,效率和准确性会更好. 部署的过程主要要注 ...

  6. iOS开发小技巧--UIScrollView内部子控件添加约束的注意点

    注意:用UIScrollView时布局子控件的时候,不要相对于UIScrollView来添加约束,这样做不是设置子控件的位置,反而是设置了UIScrollView的contentSize 子控件的尺寸 ...

  7. 【BZOJ 1013】【JSOI2008】球形空间产生器sphere 高斯消元基础题

    最基础的高斯消元了,然而我把j打成i连WA连跪,考场上再犯这种错误就真的得滚粗了. #include<cmath> #include<cstdio> #include<c ...

  8. UVA 540 stl

    Queues and Priority Queues are data structures which are known to most computer scientists. The Team ...

  9. Jquery-处理iframe的高度自适应

    超级简单的方法,也不用写什么判断浏览器高度.宽度啥的.下面的两种方法自选其一就行了.一个是放在和iframe同页面的,一个是放在test.html页面的.注意别放错地方了哦. iframe代码,注意要 ...

  10. 遍历HashMap的四种方法

    public static void main(String[] args) { Map<String,String> map=new HashMap<String,String&g ...