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 相关文章推荐
JQuery 网站换肤功能实现代码
Nov 02 Javascript
jQuery实现的Email中的收件人效果(按del键删除)
Mar 20 Javascript
Jquery多选框互相内容交换的实例代码
Jul 04 Javascript
js判断屏幕分辨率的代码
Jul 16 Javascript
jQuery获取节点和子节点文本的方法
Jul 22 Javascript
jQuery实现的向下图文信息滚动效果
May 03 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
Jun 13 Javascript
AngularJS 单选框及多选框的双向动态绑定
Apr 20 Javascript
JavaScript实现隐藏省略文字效果的方法
Apr 27 Javascript
简单实现jQuery弹幕效果
May 06 jQuery
React 组件间的通信示例
Jun 14 Javascript
MVVM框架下实现分页功能示例
Jun 14 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中func_get_args(),func_get_arg(),func_num_args()的区别
2013/09/30 PHP
ThinkPHP模板IF标签用法详解
2014/07/01 PHP
php操作redis中的hash和zset类型数据的方法和代码例子
2014/07/05 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
escape、encodeURI、encodeURIComponent等方法的区别比较
2006/12/27 Javascript
JavaScript Event学习第八章 事件的顺序
2010/02/07 Javascript
使用隐藏的new来创建对象
2011/03/29 Javascript
js中字符替换函数String.replace()使用技巧
2011/08/14 Javascript
asp.net中System.Timers.Timer的使用方法
2013/03/20 Javascript
页面定时刷新(1秒刷新一次)
2013/11/22 Javascript
JavaScript中判断原生函数检查function是否是原生代码
2014/09/09 Javascript
jQuery中:button选择器用法实例
2015/01/04 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
2015/04/21 Javascript
jQuery实现下拉框选择图片功能实例
2015/08/08 Javascript
Javascript控制div属性动态变化实例分析
2015/10/08 Javascript
JS中关于事件处理函数名后面是否带括号的问题
2016/11/16 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
2017/08/15 jQuery
Angular项目从新建、打包到nginx部署全过程记录
2017/12/09 Javascript
Koa 使用小技巧(小结)
2018/10/22 Javascript
Vue 之孙组件向爷组件通信的实现
2019/04/23 Javascript
微信小程序 弹窗输入组件的实现解析
2019/08/12 Javascript
JS校验与最终登陆界面功能完整示例
2020/01/13 Javascript
js函数和this用法实例分析
2020/03/13 Javascript
在vue中配置不同的代理同时访问不同的后台操作
2020/09/11 Javascript
详解python的ORM中Pony用法
2018/02/09 Python
Python针对给定字符串求解所有子序列是否为回文序列的方法
2018/04/21 Python
Python RabbitMQ消息队列实现rpc
2018/05/30 Python
Python递归函数特点及原理解析
2020/03/04 Python
python RSA加密的示例
2020/12/09 Python
欧缇丽加拿大官方网站:Caudalie加拿大
2019/07/18 全球购物
中学教师暑期培训方案
2014/08/27 职场文书
团队会宣传标语
2014/10/09 职场文书
期末复习计划
2015/01/19 职场文书
团代会闭幕词
2015/01/28 职场文书
高中生个性发展自我评价
2015/03/09 职场文书
vue实力踩坑之push当前页无效
2022/04/10 Vue.js