用于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. .NET 关键字

    一.base关键字 可以通过base关键字访问上一级父类方法的访问.静态static函数无法调用base 二.new 关键字new new有2个作用. new运算符   用来分配内存空间和初始化对象. ...

  2. sql脚本比较大，sqlserver 无法导入，就用cmd命令执行

    osql简单用法:用来将本地脚本执行,适合sql脚本比较大点的情况,执行起来比较方便 1 osql -S serverIP -U sa -P 123 -i C:\script.sql serverIP ...

  3. 年前辞职-WCF入门学习（4）

    前言 上一篇的学习中碰到一个问题,用地址http://localhost:8080/mex 访问元数据的时候一直提示400 bad request 错误,因为时间太晚了,查了好几遍代码,也没有发现问题 ...

  4. angular的splitter案例学习

    angular的splitter案例学习,都有注释了,作为自己的备忘. <!DOCTYPE html> <html ng-app="APP"> <he ...

  5. ListView 和 Adapter用法

    一个ListView通常有两个职责. (1)将数据填充到布局. (2)处理用户的选择点击等操作. 第一点很好理解,ListView就是实现这个功能的.第二点也不难做到,在后面的学习中读者会发现,这非常 ...

  6. iOS边练边学--AFNetWorking框架GET、Post、Download、Upload，数据解析模式以及监控联网状态

    一.AFNETWorking简单使用 get请求 get请求,以后经常用NSURLSession底层的写的部分 简单的post请求 用post请求下载文件,方法很多,还可以通过upload任务来执行 ...

  7. Hibernate-二级缓存 sessionFactory

    Hibernate 二级缓存 二级缓存需要sessionFactory来管理,它是进初级的缓存,所有人都可以使用,它是共享的. 当Hibernate根据ID访问数据对象的时候,首先从Session一级 ...

  8. 【探秘ES6】系列专栏（一）：ES6简介

    摘要:新一代JavaScript标准,ES6即将发布.[探秘ES6]系列专栏将一一剖析ES6的诸多新特性,让Web开发者对此有清晰全面的了解.本文为系列的第一篇,带你了解ES6到底是什么以及有哪些令人 ...

  9. Prim和Kruskal求最小生成树

    Prim: 算法步骤: 1.任意结点开始(不妨设为v1)构造最小生成树: 2.首先把这个结点(出发点)包括进生成树里, 3.然后在那些其一个端点已在生成树里.另一端点还未在生成树里的所有边中找出权最小 ...

  10. Bzoj1115 石子游戏Kam

    这是道权限题,差评. 题目说明引自ZYF-ZYF Description 有N堆石子,除了第一堆外,每堆石子个数都不少于前一堆的石子个数.两人轮流操作每次操作可以从一堆石子中移走任意多石子,但是要保证 ...