以下為效果圖:
總結:
1.js代碼中那些很長的字符串是圖片路徑的一種格式.
2.調用時使用: showInfo(o,t,p,m) 方法,其中o: 對象的id, t:類型(E : [error錯誤消息提示],H : [help幫助消息提示],I : [info信息消息提示],W : [warning警告消息提示]), p:位置(T : [top 在對象的下面顯示], L : (left 在對象的右邊顯示,為空默認]),m:輸出消息的字符串.
3.透明度樣式:opacity:0.3;-khtml-opacity:0.3;-moz-opacity:0.3;filter:alpha(opacity=30);
4.獲取對象的距離頁面的頂部,左邊的距離和對象的高度和寬度:
//獲取文本框的位置
function getLeft(o)
{
var _oLeft = o.offsetLeft;
while(o.offsetParent!=null) {
var _oParent = o.offsetParent;
_oLeft += _oParent.offsetLeft;
o = _oParent;
}
return _oLeft;
}
function getTop(o)
{
var _oTop = o.offsetTop;
while(o.offsetParent!=null) {
var _oParent = o.offsetParent;
_oTop += _oParent.offsetTop;
o = _oParent;
}
return _oTop;
}
function getHeight(o){
return o.clientHeight;
}
function getWidth(o){
return o.clientWidth;
}
5.在給提示框設置透明度背景時在除過IE之外的瀏覽器上出現了個問題,在給父節點設置透明度之后他的字節點就跟着繼承了父節點的透明度,而且子節點的透明度就無效了,所以只能把透明度背景去掉,
展示頁面代碼
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>信息提示測試</title>
<style type="text/css">
body
{
background-color:White;
}
input
{
background-color:white;
}
</style>
<script type="text/javascript">
var _errorimg = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAYBQTFRF8lxf82Nm82Rn9YeI8E9W8FBX7lhd8ltf8Vtg8mds725z621x8HN39Xp/9XyA7UdR8U1W8U5W3UpU3ktT309X9W119G11uxIgwh8rzik4xis27jtI0ThF3UBN8U5a61Vg9GBt01Zf3GlyyBYpyBgqyBgryBkrwhwt5C9A12Nu33aBziI535ql5qu1yl1Jzm5ewltM94mA96KayUc+9n959oB59oiA4GFb9XZy83l07Xl1+IuI8YyJ8mZm829t7YKA94uJ8IeF/7+/27a248TE////////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFapVIAAAAIB0Uk5T/////////////////////////////////////////////////////////////////////////////////////////////wD///////////////////////////////////////////////////////////////////////////+SDBJ4AAAAxElEQVQoU12QaRPBQAyG100P66baonVV0ZZ102Ir/v9PklU+8E6SSZ6ZdyYJef6JiDkOPMY8/yF6AXy2v67X1z3zExCwy257PG5WJxYIELP7IYIowryzGIHdOIchhxB4eGtYCAw5XSAEgBcLKdlAMCpXUACVajVXHiMYDhzH4QBYnd5QWPq6zkGErveFxTZbFCilnNOmaSNYzqVS9q2SpC3FYq6mqHmUqmhusro7rcuZjFzrzD63PBdWtz0xrMX3uJ8HvABbGy/xBRy6/gAAAABJRU5ErkJggg==";//"img/error.gif";
var _infoimg = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAGBQTFRF/v7/8fL18vP1AkaM/f7/CFSYC12fDFyfDmKkVZC/ttDk+v3/9Pv/9/z/7fL19vz/7PL1+f3//P7/lrbF9fz/+P3/9/3/+/7/9v3/x9TQ////AAAAAAAAAAAAAAAAAAAAhiSZVQAAACB0Uk5T//////////////////////////////////8A//////+Vml+sAAAAkElEQVQoU2WQiw7CIAxF0W7aFuvGeKzs/z/UlhkT9SYk3JM+LoTjR8F9JwRA6n53kIH4emGCfIKMPCmiBkYj4ehg3oFODN0A0aaq42xEBpCjF1jFvjMagDWlOFpifMIAtVa93zTVujpAFmk6z61JGy1EIqIARRcZQ21tKWBayrnWgz2G3sHO6GY/0f8f9/UBL0rbEWYf5FKOAAAAAElFTkSuQmCC";//"img/info.gif";
var _helpimg = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAGBQTFRF/v7/8fL18vP1zNTe2+Tu/f7/KGKWRHakXYmxX4qxapK3bJS4eZ2+lbLMorvTUICq9fv/+v3/6PD19Pv/9/z/7fL19vz/7PL1+f3//P7/9fz/+P3/9/3/+/7/9v3/////d2mbSgAAACB0Uk5T/////////////////////////////////////////wBcXBvtAAAAlUlEQVQoU2WQ7Q6CMAxFUcsVP0oZzgFbkfd/S9sZY9T+2XrS3J6t2X6qqb0IIFKvDgRM+x0xHBkQplatGmIjBkAtHQE/4EB40RMuDOhiIwYorP1VVaArOcA0z0G1QxfCHRWUUqw/z6VMDoRiVLUEjXqoGRyN9H16pFhDbW3ONpFTfq11scG8httbrKqP40f9/3FfH/AEw+8Uq/M+gIEAAAAASUVORK5CYII";//"img/help.gif";
var _warnigimg = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAYBQTFRF/ttz/tt0/tt2/96B/t6B/+GK/uCK/+KP/uKO/+OX/uSX/+We/+ae/uWe/uae/+en/+u1/uu1/vTW/tJk/uCV/+mz/+3B/+7B//HN//TX//Xc/8Vh/sVh/8Zi/sVi/tSK/9eR/tyf/+Gr/rQ8/rU8/rQ97qs9/rtJ/rpK/rtK/r9U/8FY/sFY/8FZ/sFZ/8Vi/st3/st488R4/tGH/tKI48GL/9uf6siS/+Cre1ETflMUhVgWg1YWflQVhFgXi10ZilwZil0Zj2AbkWEcl2UelGQdmmgfy59jyZxixppgxZlgxZpg0qRn0KNmzJ9kyp5jyJxixpthxJpg06Vo0qRo0qVo0aNnz6JmzqJmzaBly55kyZ1jx5tix5xixZthyKJvzqBlz6FmxZlhzq6F1bye3cy5////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAuvM8FQAAAIB0Uk5T////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AP////////////////////////////////8rdbadAAAAvElEQVQoU2NIQwMMEH5qcHAqhAUVCJWSCkYWSPURkgyBKIGoCBMzNZfwRQik+IpaWoqHp8BVRAhYWNkqCSbCBOITRBTtrM34I+OhZvixahk72JtosflBBOLdhdWMnJyN1JiigEqAAv4MyiqGri4GqqqM0SCB+ABmTXUQ0NRg8YgHCsRw6OrpyNu7yWvrarPHAgUCueSkZRVsHBXkZPQ5Y4ACccm8fNw8IMDNnewJMtQryDvJywtEBiWlpQEAuj9KICZnloAAAAAASUVORK5CYII=";//"img/warning.gif";
var _topimg = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAICAIAAACtROKYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAEBJREFUKFNj/P//PwMxAKgODQB1YRHEqghTKYpWZGk0pQh1WMxAcgBUHVY3QbwIcRiIwqUIqgKsFBQkmL7D9BwAnyLsFRxD784AAAAASUVORK5CYII=";
var _leftimg = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAPCAIAAABWaBlkAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAEdJREFUKFONUMsOACAIiv//aLPpJokHOTUeisHMjgDAcaHBbc89sl0Ib4BexJbA3koom1W1WI6aEznx37xopbnd5ZwbPjGOuJ6pJ+uydKCoAAAAAElFTkSuQmCC";//"img/zuo.PNG";
var _closeimg = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAMAAABFNRROAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAwBQTFRFAAAA/wD/////gICAwMDA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////GS9oBwAAAQB0Uk5T/wD//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////6075isAAAAwSURBVBhXY2BEBgz4eQwMIAVgEsaACoH0AZlgebAcVBmMhyIHUgbXh2YmwgH43AIAL6IAhYdnYwAAAAAASUVORK5CYII=";
var _divbackgroundcolor = "#ffffcc";//ffffcc
var _divbordercolor = "#000000";//000000
function body_load(){
}
//o: 對象的id, t:類型(error,help,info,warning), p:位置(top,left),m:輸出消息
function showInfo(o,t,p,m){
if(!$(o)){
return;
}
var _infobackgroundimg = _infoimg;
switch(t){
case "E":
_infobackgroundimg = _errorimg;
break;
case "I":
_infobackgroundimg = _infoimg;
break;
case "H":
_infobackgroundimg = _helpimg;
break;
case "W":
_infobackgroundimg = _warnigimg;
break;
}
var _newdiv = window.document.createElement("div");
_newdiv.style.position = "absolute";
var iut = $(o);
if($(o + "_newdiv")){
$(o + "_newdiv").parentNode.removeChild($(o + "_newdiv"));
}
_newdiv.style.top = getTop(iut) + "px";
_newdiv.style.left = getLeft(iut) + 16 + getWidth(iut) + "px";
var _weizhi = '<img style="position:absolute;left:-8px;top:3px;display:block;" src="'+_leftimg+'" />';
if(p == "T"){
_weizhi = '<img style="position:absolute; top:-8px; display:block;" src="'+_topimg+'" />';
_newdiv.style.top = getTop(iut) + 16 + getHeight(iut) + "px";
_newdiv.style.left = getLeft(iut) + "px";
}
var _contentText = '
 '+_weizhi+' |
'+m+' |  |
';
_newdiv.id = o + "_newdiv";
_newdiv.innerHTML = _contentText;
window.document.body.appendChild(_newdiv);
}
//o: 對象id
function closeInfo(o){
if($(o + "_newdiv")){
$(o + "_newdiv").parentNode.removeChild($(o + "_newdiv"));
}
}
//獲取文本框的位置
function getLeft(o)
{
var _oLeft = o.offsetLeft;
while(o.offsetParent!=null) {
var _oParent = o.offsetParent;
_oLeft += _oParent.offsetLeft;
o = _oParent;
}
return _oLeft;
}
function getTop(o)
{
var _oTop = o.offsetTop;
while(o.offsetParent!=null) {
var _oParent = o.offsetParent;
_oTop += _oParent.offsetTop;
o = _oParent;
}
return _oTop;
}
function getHeight(o){
return o.clientHeight;
}
function getWidth(o){
return o.clientWidth;
}
function $(o){
return window.document.getElementById(o);
}
</script>
</head>
<body>
以下為測試:<br>
<input id="Text0" onblur="closeInfo('Text0')" onfocus="showInfo('Text0','W','','請輸入用戶的姓名!');" value="" type="text" /><br />
<input id="Text1" onblur="closeInfo('Text1')" onfocus="showInfo('Text1','I','','請輸入用戶的姓名!');" value="" type="text" /><br />
<input id="Text2" onblur="closeInfo('Text2')" onfocus="showInfo('Text2','E','','請輸入用戶的姓名!');" value="" type="text" /><br />
<input id="Text3" onblur="closeInfo('Text3')" onfocus="showInfo('Text3','H','','請輸入用戶的姓名!');" value="" type="text" /><br />
<div id="detaildiv" onmouseover="showInfo('detaildiv','H','T','這里是幫助按鈕!<br>請輸入所以的信息!<br><font color=\'red\'>(全部不能為空!)</font><br><font color=\'green\'>(請點擊關閉按鈕關閉該提示!)</font>');" style="width:20px; height:20px; border:1px solid green; cursor:pointer;" align="center">?</div>
</body>
</html>