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 30 Javascript
js静态方法与实例方法分析
Jul 04 Javascript
基于jQuery的前端数据通用验证库
Aug 08 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
Aug 22 Javascript
浅谈js中的延迟执行和定时执行
May 31 Javascript
bootstrapValidator 重新启用提交按钮的方法
Feb 20 Javascript
AngularJS 霸道的过滤器小结
Apr 26 Javascript
mac中利用NVM管理不同node版本的方法详解
Nov 08 Javascript
详解如何在React组件“外”使用父组件的Props
Jan 12 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
Aug 22 Javascript
React中使用UEditor百度富文本的方法
Aug 22 Javascript
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
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开发环境配置(MySQL数据库安装图文教程)
2010/04/28 PHP
PHP投票系统防刷票判断流程分析
2012/02/04 PHP
如何利用PHP执行.SQL文件
2013/07/05 PHP
windows的文件系统机制引发的PHP路径爆破问题分析
2014/07/28 PHP
PHP下载远程图片并保存到本地方法总结
2016/01/22 PHP
PHP jpgraph库的配置及生成统计图表:折线图、柱状图、饼状图
2017/05/15 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
2007/02/05 Javascript
JQuery 将元素显示在屏幕的中央的代码
2010/02/27 Javascript
教你在heroku云平台上部署Node.js应用
2014/07/30 Javascript
轻松创建nodejs服务器(6):作出响应
2014/12/18 NodeJs
javascript实现倒计时并弹窗提示特效
2015/06/05 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
2015/08/10 Javascript
JSONObject使用方法详解
2015/12/17 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
2016/01/27 Javascript
JS判断元素是否在数组内的实现代码
2016/03/30 Javascript
jQuery EasyUI中DataGird动态生成列的方法
2016/04/05 Javascript
利用jquery实现下拉框的禁用与启用
2016/12/07 Javascript
WebSocket实现简单客服聊天系统
2017/05/12 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
2017/05/24 Javascript
使用Vue构建可重用的分页组件
2018/03/26 Javascript
使用Vuex解决Vue中的身份验证问题
2018/09/28 Javascript
vuex实现购物车功能
2020/06/28 Javascript
Python+OpenCV感兴趣区域ROI提取方法
2019/01/10 Python
python实现飞机大战游戏
2020/10/26 Python
python针对mysql数据库的连接、查询、更新、删除操作示例
2019/09/11 Python
Tkinter中复选菜单是否被选中的判断与设置方式
2020/03/04 Python
python时间序列数据转为timestamp格式的方法
2020/08/03 Python
Python grequests模块使用场景及代码实例
2020/08/10 Python
毕业生找工作的自我评价
2013/10/18 职场文书
物流管理专业应届生求职信
2013/11/21 职场文书
绿色城市实施方案
2014/03/19 职场文书
2014最新预备党员思想汇报范文:中国梦,我的梦
2014/10/25 职场文书
使用kubeadm命令行工具创建kubernetes集群
2022/03/31 Servers
Win10 Anaconda安装python-pcl
2022/04/29 Servers
ubuntu开机后ROS程序自启动问题
2022/12/24 Servers