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. DES加密：8051实现(C语言) & FPGA实现(VHDL+NIOS II)

    本文将利用C语言和VHDL语言分别实现DES加密,并在8051和FPGA上测试. 终于有机会阅读<深入浅出密码学一书>,趁此机会深入研究了DES加密的思想与实现.本文将分为两部分,第一部分 ...

  2. 转：【Java并发编程】之四：守护线程与线程阻塞的四种情况

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/17099981      守护线程   Java中有两类线程:User Thread(用户线 ...

  3. 201521123084 《Java程序设计》第10周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 1)线程:指进程中的一个执行流程: 2)一个进程可以同时运行多个不同线程,不同线程执行不同的任务: 3)创建 ...

  4. 201521123012 《Java程序设计》第三周学习总结

    一.本章学习总结 1.面对对象:(1)类 <1>属性 [1]外部类 [2]内部类 <2>方法 [1]j静态 [2]非静态 (2)对象 <1>创建对象 <2&g ...

  5. JSP学习（一）之中文乱码问题的解决

    一.响应中的乱码 我们所看到的页面,是由服务器把内容放入响应(response)中,然后发送给浏览器的.如果响应中的数据无法被正常解析,就会出现中文乱码.为什么英文不存在乱码问题?因为无论是ISO-8 ...

  6. 201521123064 《Java程序设计》第11周学习总结

    1. 本章学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. ① 定义Thread类的子类,覆盖Thread类的run()方法,然后创建该子类的实例(一般不用该方法,开销大. ...

  7. 201521123033《Java程序设计》第11周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. answer; 2. 书面作业 本次PTA作业题集多线程 1.互斥访问与同步访问 完成题集4-4(互斥访问)与4- ...

  8. 201521123070《Java程序设计》 第11周学习总结

    本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 书面作业 本次PTA作业题集多线程 互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) 1.1 除了使用 ...

  9. Linux系统文件与目录权限管理

    Linux文件目录权限管理 一.Linux文件属性及权限 1.Linux文件及目录权限及属性说明 (1)权限及属性说明 (2)文件权限说明 三种权限说明:r 读  read w 写  write  x ...

  10. scrapy爬虫框架

    downloader:负责下载html页面 spider:负责爬取页面内容,我们需要自己写爬取规则  srapy提供了selector,获取的方式有xpath,css,正则,extract item容 ...