function showLoad(tipInfo, type, autohide) {

    var pic = "";

    switch (type) {

        case 0: // loading

            pic = "./Images/loading.gif";

            break;

        case 1: // ok

            pic = "./Images/right.png";

            break;

        case 2: // error

            pic = "./Images/error.png";

            break;

        default: //其他任何值时

            pic = "./Images/loading.gif";

            break;

    }

    var eTip = document.createElement('div');

    eTip.setAttribute('id', 'tipDiv');

    eTip.style.display = 'none';

    eTip.style.width = '300px';

    eTip.style.height = '20px';

    eTip.style.padding = '5px 15px'

    eTip.innerHTML = "<img src=\"" + pic + "\" style=\"float:left;\" />  <span style=\"color:#373737; font-size:14px\">" + tipInfo + "</span>";

    try {

        document.body.appendChild(eTip);

    } catch (e) { }

    $("#tipDiv").css({

        position: "absolute",

        border: "solid 0px #D1D1D1",

        left: ($(window).width() - $("#tipDiv").outerWidth()) / 2,

        top: ($(window).height() - $("#tipDiv").outerHeight()) / 2 + $(document).scrollTop()

    });

    $('#tipDiv').show();

    if (autohide == true) {

        $('#tipDiv').fadeOut(3000);

    }

}

function closeLoad() {

    $('#tipDiv').fadeOut();

}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>Jquery提示框封装</title>

    <script src="JS/jquery-1.8.0.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $("#name").blur(function () {

                if ($(this).val() == "") {

                    tip(this, "×请输入");

                } else {

                    tip(this,"√输入正确");

                }

            })

        });

        function tip(o,tip) {

            var eTip = document.createElement("span");

            var objid = $(o).attr("id") + "_tipDiv";

            var value = $(o).val();

            //绝对路径

            var x = $(o).offset().top;

            var y = $(o).offset().left;

            var w = $(o).width();

            var h = $(o).height();

            eTip.setAttribute("id", objid);

            try {

                document.body.appendChild(eTip);

            } catch (e) { }

            $("#" + objid).hide();

            $("#" + objid).css({

                top: x,

                left: y + w + 10,

                height: h,

                position: "absolute",

                padding: "5px"

            });

            $("#" + objid).html(tip);

            $("#" + objid).show();

        }

    </script>

</head>

<body>

<br/><br/><br/><br/><br/>

  <input type="text" id="name" /><br/><br/><br/><br/>

  <input type="text" id="pwd" />

</body>

</html>

不错的JQuery屏幕居中提示信息封装,使用方便,可集成到项目的更多相关文章

  1. jQuery弹出提示信息简洁版（自动消失）

    之前看了有一些现成的blockUI.Boxy.tipswindow等的jQuery弹出层插件,可是我的要求并不高,只需要在保存后弹出提示信息即可,至于复杂点的弹出层-可以编辑的,我是直接用bootst ...

  2. 【jquery】Validform，一款不错的 jquery 表单验证插件

    关于 Validform 这是一款很不错的 jquery 表单验证插件,它几乎能够满足任何验证需求,仅仅一行代码就能搞定整站的表单验证. $('form').Validform(); 为什么能如此方便 ...

  3. jquery层居中,点击小图查看大图,弹出层居中代码，顶部层固定不动，滚动条滚动情况

    jquery层居中,点击小图查看大图,弹出层居中代码 http://www.cnblogs.com/simpledev/p/3566280.html 见第一版,发现一个情况,如果页面内容多出一屏的情况 ...

  4. 很不错的jQuery学习资料和实例

    这些都是学习Jquery很不错的资料,整理了一下,分享给大家. 希望能对大家的学习有帮助. 帕兰 Noupe带来的51个最佳jQuery教程和实例, 向大家介绍了jQuery的一些基本概念和使用的相关 ...

  5. layer弹出层不居中解决方案，layer提示不屏幕居中解决方法，layer弹窗不居中解决方案

    layer弹出层不居中解决方案,layer提示不屏幕居中解决方法,layer弹窗不居中解决方案 >>>>>>>>>>>>> ...

  6. Qt窗口屏幕居中显示（有专门的QDesktopWidget，先计算后显示）

    窗口的屏幕居中显示问题,在各开发工具中原理相同,首先使用特定的方法得到显示屏幕的宽度和高度,再根据窗口本身的宽度和高度计算出窗口的左上角坐标位置. Qt中可以采用两种方法达到窗口的屏幕居中显示: 方法 ...

  7. jQuery Ajax 二次封装

    jQuery Ajax通用js封装 第一步:引入jQuery库 <script type="text/javascript" src="<%=path%> ...

  8. 使用DOM的方法获取所有li元素，然后使用jQuery()构造函数把它封装为jQuery对象

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 一款效果非常不错的jquery插件 -Lightbox

    今天为大家介绍一款非常不错的jquery图片查看插件-Lightbox.这款图片查看插件体验很好,不仅有左右两个小箭头可以浏览上一张和下一张图片,还支持鼠标的左右键浏览上一张和下一张图片.有点类似go ...

随机推荐

  1. NET Core度身定制的AOP框架

    NET Core度身定制的AOP框架 多年从事框架设计开发使我有了一种强迫症,那就是见不得一个应用里频繁地出现重复的代码.之前经常Review别人的代码,一看到这样的程序,我就会想如何将这些重复的代码 ...

  2. 第一周作业.四则运算生成器（基于python）

    题目 从<构建之法>第一章的 "程序" 例子出发,像阿超那样,花二十分钟写一个能自动生成小学四则运算题目的命令行 "软件",满足以下需求: 除了整数 ...

  3. 【Beta】 第五次Daily Scrum Meeting

    一.本次会议为第五次meeting会议 二.时间:10:00AM-10:20AM 地点:陆大楼 三.会议站立式照片 四.今日任务安排 成员 昨日任务 今日任务 林晓芳 帮助完善登录界面 对目前完成的模 ...

  4. 【Alpha】——Seventh Scrum Meeting

    一.今日站立式会议照片 二.每个人的工作 成员 昨天已完成的工作 今天计划完成的工作 李永豪 将项目做成APK 用户界面改善 郑靖涛 协助设计账目一览表板块 用户界面改善 杨海亮 查询功能测试 用户界 ...

  5. 201521123111《Java程序设计》第7周学习总结

    1. 本章学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 线性表,栈,队列,哈希表是常用的数据结构 在java.util包中有这些数据结构的实现类.比如:List接口,实现类Arra ...

  6. 201521123013 《Java程序设计》第5周学习总结

    1. 本章学习总结 1.1 尝试使用思维导图总结有关多态和接口的知识点. 1.2可选 使用常规方法总结其他上课内容. 接口:不是类,不能使用new实例化,可用instanceof判断是否实现某接口.接 ...

  7. 201521123093 java 第三周学习总结

    1.本周学习总结 初学面向对象,会学习到很多碎片化的概念与知识.尝试学会使用思维导图将这些碎片化的概念.知识组织起来.请使用纸笔或者下面的工具画出本周学习到的知识点.截图或者拍照上传. 本周学习总结: ...

  8. 201521123096《Java程序设计》第九周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己 ...

  9. shell脚本命令，一些你在书上找不到的命令。

    1.!$<!$是一个特殊的环境变量,它代表了上一个命令的最后一个字符串.如:你可能会这样: $mkdir mydir$mv mydir yourdir$cd yourdir 可以改成: $mkd ...

  10. 【Spring源码深度解析系列 】Spring整体架构

    一.Spring的整体架构和模块 二.模块分类: 1.Core Container Core Container包含有Core .Beans.Context.和Expression  Language ...