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. jQuery的less和scss之less的基本介绍（一）

    简单的整理了一下less的基本用法,希望对大家有所帮助ㅎㅎ 一.less基础语法 1.声明变量:@变量名:变量值 使用变量:@变量名 例如 @color : #ff0000; @length : 10 ...

  2. 个人作业3--个人总结(Alpha阶段)

    一.Alpha阶段总结 这是第一次接触APP的程序设计,在组员的共同努力下实现了不少功能,但功能与界面中都有不少欠缺之处,希望在后续阶段能继续完善 二.提出问题 1.在第二章 2.3 中,通过PSP模 ...

  3. 个人作业-2 英语学习APP分析

    产品: 必应词典 PC版 第一部分:调研,评测 1.对于这款产品的第一感觉是界面做的有点生硬粗糙,而且界面有种很空的感觉,界面美化做的不是很好,第一印象不是很喜欢.不过一点,就是把单词的近义词反义词放 ...

  4. 201521123112《Java程序设计》第8周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 1.2 选做:收集你认为有用的代码片段 在做PTA5.3的时候一段看起来比较复杂的代码: List<En ...

  5. 201521123022 《Java程序设计》 第五周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 2. 书面作业 1.代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过? ...

  6. 201521123006 《Java程序设计》第3周学习总结

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

  7. Eclipse rap 富客户端开发总结(6) ： 如何发布rap到tomcat

    1.先下载以来的打包插件 war products  输入下面的地址,选择相应的插件 新建一个 war product Configutation向导 下面的war  product Configut ...

  8. 聊聊React高阶组件(Higher-Order Components)

    使用 react已经有不短的时间了,最近看到关于 react高阶组件的一篇文章,看了之后顿时眼前一亮,对于我这种还在新手村晃荡.一切朝着打怪升级看齐的小喽啰来说,像这种难度不是太高同时门槛也不是那么低 ...

  9. python基础之字典、赋值补充

    字典常用操作: 存/取info_dic={'name':'egon','age':18,'sex':'male'} print(info_dic['name11111111']) print(info ...

  10. 第三节课：简单的网络命令和ARP欺骗

    MTU :最大传输单元 RX:收包 TX:   发包 Ifconfig: IP配置命令,config是linux中用于显示或配置网络设备(网络接口卡)的命令 ifconfig eth0 192.168 ...