编程 Javascript

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程序设计有所帮助。

jQuery封装的屏幕居中提示信息代码

- Author -

smartsmile2012

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Code:　write(s,d) 输出连续字符串

Aug 19 Javascript

验证控件与Button的OnClientClick事件详细解析

Dec 04 Javascript

javascript自动给文本url地址增加链接的方法分享

Jan 20 Javascript

js给页面加style无效果的解决方法

Jan 20 Javascript

DEDECMS如何为文章添加HOT NEW标志图片

Aug 14 Javascript

jQuery使用$.ajax进行异步刷新的方法(附demo下载)

Dec 04 Javascript

jQuery操作Table技巧大汇总

Jan 23 Javascript

JavaScript+html5 canvas实现本地截图教程

Apr 16 Javascript

微信小程序中转义字符的处理方法

Mar 28 Javascript

微信小程序日历弹窗选择器代码实例

May 09 Javascript

element-ui 本地化使用教程详解

Oct 28 Javascript

vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)

Jun 11 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