jQuery封装的屏幕居中提示信息代码


Posted in Javascript onJune 08, 2016

本文实例讲述了jQuery封装的屏幕居中提示信息代码。分享给大家供大家参考,具体如下:

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程序设计有所帮助。

Javascript 相关文章推荐
Ajax+Json 级联菜单实现代码
Oct 27 Javascript
location.href语句与火狐不兼容的问题
Jul 04 Javascript
jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
Feb 18 Javascript
JS操作Cookie写入和读取实例代码
Oct 20 Javascript
JS中的构造函数详细解析
Mar 10 Javascript
input 禁止输入特殊字符的四种实现方式
Aug 24 Javascript
JavaScript动态检验密码强度的实现方法
Nov 09 Javascript
详解node.js 下载图片的 2 种方式
Mar 02 Javascript
优化Vue项目编译文件大小的方法步骤
May 27 Javascript
在vue中利用v-html按分号将文本换行的例子
Nov 14 Javascript
vue和小程序项目中使用iconfont的方法
May 19 Javascript
React Hook用法示例详解(6个常见hook)
Apr 28 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
Jun 07 #Javascript
JavaScript基础语法之js表达式
Jun 07 #Javascript
JavaScript必看小技巧(必看)
Jun 07 #Javascript
通过正则表达式获取url中参数的简单实现
Jun 07 #Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
Jun 07 #Javascript
javascript显示倒计时控制按钮的简单实现
Jun 07 #Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
Jun 07 #Javascript
You might like
社区(php&amp;&amp;mysql)一
2006/10/09 PHP
PHP 魔术函数使用说明
2010/05/14 PHP
php生成略缩图代码
2012/07/16 PHP
PHP中检索字符串的方法分析【strstr与substr_count方法】
2017/02/17 PHP
使用PHPExcel实现数据批量导出为excel表格的方法(必看)
2017/06/09 PHP
javascript正则匹配汉字、数字、字母、下划线
2014/04/10 Javascript
javascript数组详解
2014/10/22 Javascript
究竟什么是Node.js?Node.js有什么好处?
2015/05/29 Javascript
JavaScript中setFullYear()方法的使用详解
2015/06/11 Javascript
JavaScript运动减速效果实例分析
2015/08/04 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
2015/12/22 Javascript
KnockoutJs快速入门教程
2016/05/16 Javascript
webpack 静态资源集中输出的方法示例
2018/11/09 Javascript
细说Vue组件的服务器端渲染的过程
2019/05/30 Javascript
layui 中select下拉change事件失效的解决方法
2019/09/20 Javascript
解决vue watch数据的方法被调用了两次的问题
2020/11/07 Javascript
Python实现将一个大文件按段落分隔为多个小文件的简单操作方法
2017/04/17 Python
详解如何用OpenCV + Python 实现人脸识别
2017/10/20 Python
python数据分析数据标准化及离散化详解
2018/02/26 Python
Ubuntu18.04下python版本完美切换的解决方法
2019/06/14 Python
python中对数据进行各种排序的方法
2019/07/02 Python
在Django的View中使用asyncio的方法
2019/07/12 Python
python学生管理系统的实现
2020/04/05 Python
python批量提取图片信息并保存的实现
2021/02/05 Python
利用CSS3实现单选框动画特效示例代码
2016/09/26 HTML / CSS
财务管理专业应届毕业生求职信
2013/09/22 职场文书
自我鉴定范文200字
2013/10/02 职场文书
路政管理专业个人自荐信范文
2013/11/30 职场文书
拾金不昧表扬信范文
2014/01/11 职场文书
小班上学期评语
2014/05/05 职场文书
妇女工作先进事迹
2014/08/17 职场文书
小学生心理健康活动总结
2015/05/08 职场文书
2015年秋季运动会前导词
2015/07/20 职场文书
2016大学生求职自荐信范文
2016/01/28 职场文书
最新最全的手机号验证正则表达式
2022/02/24 Javascript
一文了解MYSQL三大范式和表约束
2022/04/03 MySQL