js 自定义title提示框
以下为效果图:
总结:
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 = '
| '+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>
