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

本文实例讲述了jQuery封装的屏幕居中提示信息代码。分享给大家供大家参考，具体如下：

function showLoad（tipInfo, type, autohide） {var pic = "";switch （type） {case 0: // loadingpic = "./Images/loading.gif";break;case 1: // okpic = "./Images/right.png";break;case 2: // errorpic = "./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中Ajax用法总结》、《jQuery表格（table）操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。