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读取中文COOKIE的解决办法
Feb 15 Javascript
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
Nov 28 Javascript
用JSON做数据传输格式中的一些问题总结
Dec 21 Javascript
extjs 04_grid 单击事件新发现
Nov 27 Javascript
非html5实现js版弹球游戏示例代码
Sep 22 Javascript
AngularJS模块学习之Anchor Scroll
Jan 19 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
Apr 19 Javascript
强大Vue.js组件浅析
Sep 12 Javascript
Node层模拟实现multipart表单的文件上传示例
Jan 02 Javascript
vue工程全局设置ajax的等待动效的方法
Feb 22 Javascript
node基于async/await对mysql进行封装
Jun 20 Javascript
vue3.0 上手体验
Sep 21 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计划任务之关闭浏览器后仍然继续执行的函数
2010/07/22 PHP
php生成RSS订阅的方法
2015/02/13 PHP
php获取汉字拼音首字母的方法
2015/10/21 PHP
jQuery ajax 路由和过滤器使用说明
2011/08/02 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
2013/05/08 Javascript
JavaScript图片放大技术(放大镜)实现代码分享
2013/11/14 Javascript
js实现动态改变字体大小代码
2014/01/02 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
2016/10/11 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
2016/10/14 Javascript
angular5 httpclient的示例实战
2018/03/12 Javascript
详解vue添加删除元素的方法
2018/06/30 Javascript
微信小程序入门之广告条实现方法示例
2018/12/05 Javascript
Vue.extend实现挂载到实例上的方法
2019/05/01 Javascript
如何获取vue单文件自身源码路径
2019/05/06 Javascript
防止Layui form表单重复提交的实现方法
2019/09/10 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
2019/09/21 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
2020/07/30 Javascript
vue自定义组件实现双向绑定
2021/01/13 Vue.js
javascript实现倒计时提示框
2021/03/02 Javascript
[01:18]DOTA2超级联赛专访hanci ForLove淘汰感言曝光
2013/06/04 DOTA
Python数据结构之翻转链表
2017/02/25 Python
浅谈python jieba分词模块的基本用法
2017/11/09 Python
Python基础教程之内置函数locals()和globals()用法分析
2018/03/16 Python
对json字符串与python字符串的不同之处详解
2018/12/19 Python
对django后台admin下拉框进行过滤的实例
2019/07/26 Python
一款利用纯css3实现的360度翻转按钮的实例教程
2014/11/05 HTML / CSS
PHP经典面试题
2016/09/03 面试题
2014年公司植树节活动方案
2014/03/04 职场文书
企业安全生产目标责任书
2014/07/23 职场文书
教师党员先进性教育自我剖析材料思想汇报
2014/09/24 职场文书
2015年工程师工作总结
2015/04/30 职场文书
计划生育责任书
2015/05/09 职场文书
文艺晚会开场白
2015/05/29 职场文书
Python 解决空列表.append() 输出为None的问题
2021/05/23 Python
redis击穿 雪崩 穿透超详细解决方案梳理
2022/03/17 Redis
2022年显卡天梯图(6月更新)
2022/06/17 数码科技