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 相关文章推荐
javascript 一个函数对同一元素的多个事件响应
Jul 25 Javascript
javascript 面向对象全新理练之数据的封装
Dec 03 Javascript
锋利的jQuery jQuery中的DOM操作
Mar 21 Javascript
PHP+mysql+Highcharts生成饼状图
May 04 Javascript
JS中产生标识符方式的演变
Jun 12 Javascript
JS使用cookie设置样式的方法
Jun 30 Javascript
BootStrap CSS全局样式和表格样式源码解析
Jan 20 Javascript
Vue中定义全局变量与常量的各种方式详解
Aug 23 Javascript
react配置antd按需加载的使用
Feb 11 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
Apr 11 Javascript
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
用Golang运行JavaScript的实现示例
Nov 25 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的日期处理函数及uchome的function_coomon中日期处理函数的研究
2011/01/12 PHP
php批量缩放图片的代码[ini参数控制]
2011/02/11 PHP
php 遍历目录,生成目录下每个文件的md5值并写入到结果文件中
2016/12/12 PHP
jQuery页面图片伴随滚动条逐渐显示的小例子
2013/03/21 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
2013/08/14 Javascript
js中的内部属性与delete操作符介绍
2015/08/10 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
2016/01/20 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
2016/07/12 Javascript
js 轮播效果实例分享
2016/12/28 Javascript
nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)
2017/07/05 NodeJs
基于Vue实现电商SKU组合算法问题
2019/05/29 Javascript
详解NodeJs项目 CentOs linux服务器线上部署
2019/09/16 NodeJs
Vue+Vuex实现自动登录的知识点详解
2020/03/04 Javascript
微信小程序订阅消息(java后端实现)开发
2020/06/01 Javascript
JavaScript实现消消乐的源代码
2021/01/12 Javascript
[12:51]71泪洒现场!是DOTA2让经典重现
2014/03/24 DOTA
[36:41]完美世界DOTA2联赛循环赛FTD vs Magma第一场 10月30日
2020/10/31 DOTA
python的dict,set,list,tuple应用详解
2014/07/24 Python
教大家玩转Python字符串处理的七种技巧
2017/03/31 Python
python excel使用xlutils类库实现追加写功能的方法
2018/05/02 Python
如何用Python合并lmdb文件
2018/07/02 Python
Python SQL查询并生成json文件操作示例
2018/08/17 Python
使用Python实现租车计费系统的两种方法
2018/09/29 Python
Windows系统下PhantomJS的安装和基本用法
2018/10/21 Python
Python判断一个list中是否包含另一个list全部元素的方法分析
2018/12/24 Python
对python3 sort sorted 函数的应用详解
2019/06/27 Python
Django的性能优化实现解析
2019/07/30 Python
护理自我鉴定范文
2013/10/06 职场文书
爱岗敬业演讲稿范文
2014/01/14 职场文书
《春晓》教学反思
2014/04/20 职场文书
小学生植树节活动总结
2014/07/04 职场文书
成品仓管员岗位职责
2015/04/01 职场文书
三十年再续同学情倡议书
2019/11/27 职场文书
vue实现水波涟漪效果的点击反馈指令
2021/05/31 Vue.js
python ansible自动化运维工具执行流程
2021/06/24 Python
Mysql数据库事务的脏读幻读及不可重复读详解
2022/05/30 MySQL