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. NHibernate教程(5)--CRUD操作

    NHibernate之旅(5):探索Insert, Update, Delete操作 2008-10-17 16:31 by 李永京, 42903 阅读, 73 评论, 收藏,  编辑 本节内容 操作 ...

  2. 201521123020《Java程序设计》第8周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 本次作业题集集合 1.List中指定元素的删除(题目4-1) 1.1 实验总结 运用到了equ ...

  3. 201521123060 《Java程序设计》第7周学习总结

    1. 本周学习总结 2. 书面作业 1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 答:contains方法调用indexOf方法,遍历遍历内部用于保存数据的e ...

  4. 201521123005《java程序设计》第四周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. ·继承(是什么,意义) -父类(被继承的类) -子类(继承父类) -多态(解决重复代码的问题 ...

  5. 201521123019 《Java程序设计》第4周学习总结

    1. 本章学习总结 2. 书面作业 Q1.注释的应用:使用类的注释与方法的注释为前面编写的类与方法进行注释,并在Eclipse中查看.(截图) Q2.面向对象设计(大作业1-非常重要) 2.1 讲故事 ...

  6. 201521123033《Java程序设计》第9周学习总结

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

  7. 201521123070 《JAVA程序设计》第14周学习总结

    1. 本章学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 Q1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现 ...

  8. smtp模块使用

    import smtplib from email.mime.text import MIMEText from bs4 import BeautifulSoup from urllib.reques ...

  9. Struts2第十篇【数据校验、代码方式、XML配置方式、错误信息返回样式】

    回顾以前的数据校验 使用一个FormBean对象来封装着web端来过来的数据 维护一个Map集合保存着错误信息-对各个字段进行逻辑判断 //表单提交过来的数据全都是String类型的,birthday ...

  10. Oracle单引号的用法-转义

    在ORACLE中,单引号有两个作用:  1:字符串是由单引号引用  2:转义. 单引号的使用是就近配对.而在单引号充当转义角色时相对不好理解 1.从第二个单引号开始被视为转义符,如果第二个单引号后面还 ...