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 相关文章推荐
从QQ网站中提取的纯JS省市区三级联动菜单
Dec 25 Javascript
javascript中数组的多种定义方法和常用函数简介
May 09 Javascript
JS解析XML文件和XML字符串详解
Apr 17 Javascript
简单总结JavaScript中的String字符串类型
May 26 Javascript
jQuery内容过滤选择器用法示例
Sep 09 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
Dec 16 Javascript
基于vue中解决v-for使用报红并出现警告的问题
Mar 03 Javascript
浅谈Webpack 持久化缓存实践
Mar 22 Javascript
详解操作虚拟dom模拟react视图渲染
Jul 25 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
Aug 10 Javascript
详解vue中async-await的使用误区
Dec 05 Javascript
Vue设置长时间未操作登录自动到期返回登录页
Jan 22 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记录和读取JSON格式日志文件
2016/07/07 PHP
php实现留言板功能
2017/03/05 PHP
javascript整除实现代码
2010/11/23 Javascript
使用Raygun对Node.js应用进行错误处理的方法
2015/06/23 Javascript
js解决movebox移动问题
2016/03/29 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
javascript实现二叉树遍历的代码
2017/06/08 Javascript
JavaScript-定时器0~9抽奖系统详解(代码)
2017/08/16 Javascript
实例讲解Vue.js中router传参
2018/04/22 Javascript
vue解决弹出蒙层滑动穿透问题的方法
2018/09/22 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
2019/04/17 Javascript
原生js实现弹幕效果
2020/11/29 Javascript
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
Python numpy.array()生成相同元素数组的示例
2018/11/12 Python
对python调用RPC接口的实例详解
2019/01/03 Python
详解【python】str与json类型转换
2019/04/29 Python
pyQT5 实现窗体之间传值的示例
2019/06/20 Python
python word转pdf代码实例
2019/08/16 Python
简单了解python 生成器 列表推导式 生成器表达式
2019/08/22 Python
利用matplotlib实现根据实时数据动态更新图形
2019/12/13 Python
Python基础教程之输入输出和运算符
2020/07/26 Python
Python 开发工具通过 agent 代理使用的方法
2020/09/27 Python
HTML5实现的震撼3D焦点图动画的示例代码
2019/09/26 HTML / CSS
Tessabit日本:集世界奢侈品和设计师品牌的意大利精品买手店
2020/01/07 全球购物
客服端调用EJB对象的几个基本步骤
2012/01/15 面试题
物控部经理职务说明书
2014/02/25 职场文书
应届生求职信范文
2014/05/26 职场文书
美化环境标语
2014/06/20 职场文书
小学班级特色活动方案
2014/08/31 职场文书
无子女夫妻离婚协议书(4篇)
2014/10/20 职场文书
电气工程师岗位职责
2015/02/12 职场文书
2015年街道除四害工作总结
2015/05/15 职场文书
消防宣传语大全
2015/07/13 职场文书
婚礼家长致辞
2015/07/27 职场文书
七年级之家长会发言稿范文
2019/09/04 职场文书
MySQL提升大量数据查询效率的优化神器
2022/07/07 MySQL