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 相关文章推荐
关于可运行代码无法正常执行的使用说明
May 13 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
May 04 Javascript
Javascript递归打印Document层次关系实例分析
May 15 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
Aug 11 Javascript
vue.js入门教程之计算属性
Sep 01 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
Jun 25 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
Sep 25 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
Mar 26 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
Oct 23 Javascript
JavaScript常用工具函数库汇总
Sep 17 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
Nov 06 Javascript
JS中一些高效的魔法运算符总结
May 06 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
解析二进制流接口应用实例 pack、unpack、ord 函数使用方法
2013/06/18 PHP
简单的php+mysql聊天室实现方法(附源码)
2016/01/05 PHP
详解PHP中websocket的使用方法
2016/09/15 PHP
用javascript父窗口控制只弹出一个子窗口
2007/04/10 Javascript
js判断屏幕分辨率的代码
2013/07/16 Javascript
jquery简单实现鼠标经过导航条改变背景图
2013/12/17 Javascript
jQuery对下拉框,单选框,多选框的操作
2014/02/21 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
2014/03/19 Javascript
js实现checkbox全选和反选示例
2014/05/01 Javascript
JavaScript设计模式初探
2016/01/07 Javascript
javascript的正则匹配方法学习
2016/02/24 Javascript
Vue.js开发环境搭建
2016/11/10 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
2016/11/16 Javascript
jquery+html仿翻页相册功能
2016/12/20 Javascript
angularJS 指令封装回到顶部示例详解
2017/01/22 Javascript
js实现百度搜索提示框
2017/02/05 Javascript
js控制文本框禁止输入特殊字符详解
2017/04/07 Javascript
微信小程序封装分享与分销功能过程解析
2019/08/13 Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
2019/08/20 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
2019/09/19 Javascript
layui清除radio的选中状态实例
2019/11/14 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
2020/02/01 jQuery
vue离开当前页面触发的函数代码
2020/09/01 Javascript
vue打开子组件弹窗都刷新功能的实现
2020/09/21 Javascript
Python OpenCV 调用摄像头并截图保存功能的实现代码
2019/07/02 Python
Python 硬币兑换问题
2019/07/29 Python
Django 源码WSGI剖析过程详解
2019/08/05 Python
python、PyTorch图像读取与numpy转换实例
2020/01/13 Python
使用opencv中匹配点对的坐标提取方式
2020/06/04 Python
Python3如何在服务器打印资产信息
2020/08/27 Python
python如何遍历指定路径下所有文件(按按照时间区间检索)
2020/09/14 Python
Elizabeth Gage官网:英国最好的珠宝设计之一
2020/09/26 全球购物
大学生军训广播稿
2014/01/24 职场文书
会计专业毕业生自荐书
2014/06/25 职场文书
预防职务犯罪警示教育心得体会
2016/01/15 职场文书
pytorch查看网络参数显存占用量等操作
2021/05/12 Python