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 相关文章推荐
js调用iframe实现打印页面内容的方法
Mar 04 Javascript
原生js配合cookie制作保存路径的拖拽
Dec 29 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
Jul 08 Javascript
AngularJS 简单应用实例
Jul 28 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
Aug 02 Javascript
深入理解jQuery.data() 的实现方式
Nov 30 Javascript
微信小程序之购物车功能
Sep 23 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
May 30 Javascript
React组件对子组件children进行加强的方法
Jun 23 Javascript
微信小程序使用GoEasy实现websocket实时通讯
May 19 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
Aug 10 Javascript
微信小程序基础教程之echart的使用
Jun 01 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
《魔兽世界》惊魂幻象将获得调整
2020/03/08 其他游戏
php获取指定(访客)IP所有信息(地址、邮政编码、国家、经纬度等)的方法
2015/07/06 PHP
浅谈laravel数据库查询返回的数据形式
2019/10/21 PHP
Javascript 设计模式(二) 闭包
2010/05/26 Javascript
通过jQuery源码学习javascript(一)
2012/12/27 Javascript
当鼠标移动时出现特效的JQuery代码
2013/11/08 Javascript
javascript中数组的concat()方法使用介绍
2013/12/18 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
2015/02/27 Javascript
JS实现网页表格自动变大缩小的方法
2015/03/09 Javascript
js实现简单的省市县三级联动效果实例
2016/02/18 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
2016/08/08 Javascript
ajax的分页查询示例(不刷新页面)
2017/01/11 Javascript
Node.js的Koa实现JWT用户认证方法
2018/05/05 Javascript
Angular5中提取公共组件之radio list的实例代码
2018/07/10 Javascript
Vue elementui字体图标显示问题解决方案
2020/08/18 Javascript
[15:09]DOTA2国际邀请赛采访专栏:Loda
2013/08/06 DOTA
[02:34]肉山说——泡妞篇
2014/09/16 DOTA
Python基于DES算法加密解密实例
2015/06/03 Python
Python编程实现正则删除命令功能
2017/08/30 Python
tensorflow实现对图片的读取的示例代码
2018/02/12 Python
解决PyCharm控制台输出乱码的问题
2019/01/16 Python
python仿抖音表白神器
2019/04/08 Python
对python 中class与变量的使用方法详解
2019/06/26 Python
django项目登录中使用图片验证码的实现方法
2019/08/15 Python
Python django框架 web端视频加密的实例详解
2020/11/20 Python
如何通过安装HomeBrew来安装Python3
2020/12/23 Python
python批量提取图片信息并保存的实现
2021/02/05 Python
台湾SHOPRO购物行家:亚洲首创影视.3C.家电.优质购物平台
2018/05/07 全球购物
工程监理应届生求职信
2013/11/09 职场文书
就业自荐信
2013/12/04 职场文书
《画家乡》教学反思
2014/04/22 职场文书
思想作风纪律整顿心得体会
2014/09/04 职场文书
2015年教师自我评价范文
2015/03/04 职场文书
2016年小学感恩节活动总结
2016/04/01 职场文书
python如何做代码性能分析
2021/04/26 Python
适合后台管理系统开发的12个前端框架(小结)
2021/06/29 Javascript