用于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. JavaScript 里 new 出来的对象 怎么销毁它？

    JavaScript的规范(ECMA-262 ECMAScript)没规定JavaScript引擎要如何实现对JavaScript对象的内存管理.实际实现中几乎所有JavaScript引擎都使用基于跟 ...

  2. 关于Chrome的开发15个小技巧

    一.快速查找文件 如果你使用过Sublime,那么你会知道’Go to anything’的强大.没错,Chrome现在也有了这一功能. 操作如下: 1.F12打开你的Chrome调试器: 2.按下C ...

  3. [poj3274]排排站(Hash）

    题目:http://poj.org/problem?id=3274 题目大意:http://www.wikioi.com/problem/1247/ (此题中文版) 分析: 令sum[i][j]表示a ...

  4. 工作的思考十七：工作中容易犯的错误 - Delay

    其实IT是一个很严谨的行业,不管是从代码角度还是从日常的工作分配都是按计划来的. 从今年年初到现在,在我的工作中出现了两次“Delay”,第一次不以为然,虽然上司也找过我谈话,但没意识到问题的严重性. ...

  5. AngularJS开发指南4：指令的详解

    指令是我们用来扩展浏览器能力的技术之一.在DOM编译期间,和HTML元素关联着的指令会被检测到,并且被执行.这使得指令可以为DOM指定行为,或者改变它. AngularJS有一套完整的.可扩展的.用来 ...

  6. OC----简单的购物系统----

    今天下午OC上机考试,虽然考试的时候没写完, 但是课下写完了. main.m #import <Foundation/Foundation.h> #import "Shops.h ...

  7. C头文件之<cstring>

    (string.h) 这个文件夹主要是定义了几个对字符串和数组进行操作的函数.功能很强大.下面是重要函数: strcpy.strncpy strcpy,strncpy 这两个函数是对字符串的复制,很常 ...

  8. Could not open Hibernate Session for transaction;

    javax.servlet.ServletException: org.springframework.transaction.CannotCreateTransactionException: Co ...

  9. DELETE和DELETE FROM有什么区别

    你如果只针对表进行删除,则一样. 但是如果需要联合其他表,则需要使用from 例如 delete tb1 from tb1 m where id in (select id from tb2) 我的习 ...

  10. 15.Android中LinearLayout布局一些小记录

    在App中,我们经常看到布局中会有分割线,直接上代码: <?xml version="1.0" encoding="utf-8"?> <Lin ...