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. [自制操作系统] JOS文件系统详解&支持工作路径&MSH

    本文分为两部分: 第一部分将详细分析JOS的文件系统及文件描述符的实现方法. 第二部分将实现工作路径,提供新的系统调用,完善用户空间工具. 本文中支持的新特性: 支持进程工作目录 提供getcwd与c ...

  2. 五,ESP8266 TCP服务器多连接

    一些时间去准备朋友的元器件了... 接着写,,争取今天写完所有的文章,,因为答应了朋友下周5之前要做好朋友的东西 对于TCP大家在玩AT指令的时候有没有发现客户端最多连接5个,,,再连接就不行了?? ...

  3. 用webgl打造自己的3D迷宫游戏

    用webgl打造自己的3D迷宫游戏 2016/09/19 · JavaScript · WebGL 原文出处: AlloyTeam    背景:前段时间自己居然迷路了,有感而发就想到写一个可以让人迷路 ...

  4. About Cheating and Plagiarism

    我先描述一下此次事件的具体经过.昨天3月15号的晚上十点,是第四次作业的deadline.在15号之前,只有五位同学提交了作业,而在临近deadline的这几个小时内密密麻麻地提交了二十多份作业.和第 ...

  5. 团队作业8——Beta 阶段冲刺4th day

    团队作业8--Beta 阶段冲刺4rd day 一.当天站立式会议   二.每个人的工作 (1)昨天已完成的工作(具体在表格中) 添加了支付功能,并且对支付功能进行了测试 (2)今天计划完成的工作(具 ...

  6. 线程高级篇-Lock锁和Condition条件

    浅谈Synchronized: synchronized是Java的一个关键字,也就是Java语言内置的特性,如果一个代码块被synchronized修饰了,当一个线程获取了对应的锁,执行代码块时,其 ...

  7. 201521123019 《Java程序设计》第8周学习总结

    1. 本章学习总结 2. 书面作业 一.List中指定元素的删除(题目4-1) for (int i = list.size()-1; i >=0; i--) {//从最后一个元素开始删除 if ...

  8. 201521123016 《Java程序设计》第7周学习总结

    1. 本周学习总结 2. 书面作业 1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 public boolean contains(Object o) { re ...

  9. 201521123070 《JAVA程序设计》第3周学习总结

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

  10. 201521123002《Java程序设计》第9周学习总结

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