用于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. Git.Framework 框架随手记--IIS7运行序列化问题

    客户反馈系统又登录不了,这是最近几次连续出现相同的问题,从日志反应情况来看: 日志级别:[info] 日志位置:Git.Framework.Resource.ResourceManager 日志时间: ...

  2. 使用Git进行代码管理

    Git简介 Git 是 Linux Torvalds 为了帮助管理 Linux® 内核开发而开发的一个开放源码的版本控制软件. 先讲一下如何把开源项目fork到自己的github中 1.  点击图中的 ...

  3. Ibatis的类型处理器TypeHandler解析

    Ibatis允许用户像在hibernate中一样定义自己的类型,但是,用户自定义类型需要与数据库中的字段类型进行对应.它的处理方法是允许我们扩展TypeHandler.Ibatis框架在处理该数据类型 ...

  4. Servlet获取简单验证码

    package com.helloweenvsfei.servlet; import java.awt.Color; import java.awt.Font; import java.awt.Gra ...

  5. cookie的一些细节

    什么是 Cookie “cookie 是存储于访问者的计算机中的变量.每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie.你可以使用 JavaScript 来创建和取回 cookie ...

  6. 【HDU 2222】Keywords Search AC自动机模板题

    参考iwtwiioi的模板写出来的.上午gty讲的并没有听懂,只好自己慢慢对着模板理解. 在HDU上为什么相同的程序提交有时T有时A!!! 奉上sth神犇的模板(不是这道题): var ch:char ...

  7. jQuery 文本编辑器插件 HtmlBox 使用

    0.htmlbox下载地址:http://download.csdn.net/detail/leixiaohua1020/6376479 1.引入头文件 <script src="li ...

  8. Oracle11g 32位安装步骤

    1.注意Oracle分成两个文件,下载完后,将两个文件解压到同一目录下即可. 路径名称中,最好不要出现中文,也不要出现空格等不规则字符.官方下地址:http://www.oracle.com/tech ...

  9. CRUD之delete操作

    在公司的项目中delete之后的操作有两种处理方式 1.后台删除成功之后前台页面刷新 2.后台删除成功之后页面不刷新,但是数据所在的那个div会刷新一次 3.后台删除,页面上做了一个删除,删除的td没 ...

  10. Pseudo-elements ::before, ::after 範例

    xhtml <strong class="amount">700</strong> css .amount::before {content:"$ ...