DIV+CSS弹出提示框脚本

 

DIV+CSS弹出提示框脚本，效果如下：

JS代码如下

Code
/*
使用方法：
          直接调用showhint()方法即可，showhint()方法中参数说明：obj为要显示提示信息的控件对象，info为提示内容
          例：
          onmouseover="showhint(this,'这是地球人都知道的东西，没什么好提示的。')"
          onmouseout="hidehintinfo()"
*/
document.write("<span id='hintdiv' style='display:none;position:absolute;z-index:500;'></span>");
function showhint(obj,info)
{
    var top=obj.offsetTop;
    var showtype="up";
    var topimg="/ControlsTest/images/hint/hintuptop.gif";
    var bottomimg="/ControlsTest/images/hint/hintupbottom.gif";
    var hintimg="/ControlsTest/images/hint/ydot.png";
    if(top<200)
    {
        showtype="down";
        topimg="/ControlsTest/images/hint/hintdowntop.gif";
        bottomimg="/ControlsTest/images/hint/hintdownbottom.gif";
    }
    showhintinfo(obj,0,0,'提示',info,0,showtype,topimg,bottomimg,hintimg);
}
function showhintinfo(obj, objleftoffset,objtopoffset, title, info , objheight, showtype ,topimg,bottomimg,hintimg)
{
    var p = getposition(obj);
    if((showtype==null)||(showtype ==""))
    {
        showtype =="up";
    }
    //以下是自己修改
    var html=" <div style='position:absolute; visibility: visible; width:271px;z-index:501;'> <p style='margin:0; padding:0;'> <img src='"+topimg+"'/> </p> <div style='overflow:hidden; zoom:1; border-left:1px solid #000000; border-right:1px solid #000000; padding:3px 10px;  text-align:left; word-break:break-all;letter-break:break-all;font: 12px/160% Tahoma, Verdana,snas-serif; color:#6B6B6B; background:#FFFFE1 no-repeat;margin-top:-5px;margin-bottom:-5px;'> <img style='float:left;margin:0 3px 0px 3px;' src='"+hintimg+"' /> <span id='hintinfoup'>"+info+"</span> </div> <p style='margin:0; padding:0;'> <img src='"+bottomimg+"'/> </p> </div> <iframe id='hintiframe' style='position:absolute;z-index:100;width:276px;scrolling:none;' frameborder='0'></iframe>";
    //以上是自己修改
//    document.getElementById('hintiframe'+showtype).style.height= objheight + "px";
//    var frame;
//    frame=document.getElementById('hintiframe'+showtype).style.height;
//    document.getElementById('hintinfo'+showtype).innerHTML = info;
//    document.getElementById('hintdiv'+showtype).style.display='block';
    document.getElementById('hintdiv').style.display='block';

        if(objtopoffset == 0)
        {
            document.getElementById("hintdiv").innerHTML=html;
            if(showtype=="up")
            {
                document.getElementById('hintiframe').style.height= objheight + "px";
                document.getElementById('hintdiv').style.top=(p['y']-document.getElementById('hintinfo'+showtype).offsetHeight-43)+"px";
            }
            else
            {
                document.getElementById('hintiframe').style.height= objheight + "px";
                document.getElementById('hintdiv').style.top=p['y']+obj.offsetHeight+3+"px";
            }
        }
        else
        {
            document.getElementById('hintdiv').style.top=p['y']+objtopoffset+"px";
        }

    document.getElementById('hintdiv').style.left=p['x']+objleftoffset+"px";
}
    
function hidehintinfo()
{
    document.getElementById('hintdiv').style.display='none';
//    document.getElementById('hintdivdown').style.display='none';
}
function getposition(obj)
{
    var r = new Array();
    r['x'] = obj.offsetLeft;
    r['y'] = obj.offsetTop;
    while(obj = obj.offsetParent)
    {
        r['x'] += obj.offsetLeft;
        r['y'] += obj.offsetTop;
    }
    return r;
}

 

 

Code
/*
使用方法：
          直接调用showhint()方法即可，showhint()方法中参数说明：obj为要显示提示信息的控件对象，info为提示内容
          例：
          onmouseover="showhint(this,'这是地球人都知道的东西，没什么好提示的。')"
          onmouseout="hidehintinfo()"
*/
document.write("<span id='hintdiv' style='display:none;position:absolute;z-index:500;'></span>");
function showhint(obj,info)
{
    var top=obj.offsetTop;
    var showtype="up";
    var topimg="/ControlsTest/images/hint/hintuptop.gif";
    var bottomimg="/ControlsTest/images/hint/hintupbottom.gif";
    var hintimg="/ControlsTest/images/hint/ydot.png";
    if(top<200)
    {
        showtype="down";
        topimg="/ControlsTest/images/hint/hintdowntop.gif";
        bottomimg="/ControlsTest/images/hint/hintdownbottom.gif";
    }
    showhintinfo(obj,0,0,'提示',info,0,showtype,topimg,bottomimg,hintimg);
}
function showhintinfo(obj, objleftoffset,objtopoffset, title, info , objheight, showtype ,topimg,bottomimg,hintimg)
{
    var p = getposition(obj);
    if((showtype==null)||(showtype ==""))
    {
        showtype =="up";
    }
    //以下是自己修改
    var html=" <div style='position:absolute; visibility: visible; width:271px;z-index:501;'> <p style='margin:0; padding:0;'> <img src='"+topimg+"'/> </p> <div style='overflow:hidden; zoom:1; border-left:1px solid #000000; border-right:1px solid #000000; padding:3px 10px;  text-align:left; word-break:break-all;letter-break:break-all;font: 12px/160% Tahoma, Verdana,snas-serif; color:#6B6B6B; background:#FFFFE1 no-repeat;margin-top:-5px;margin-bottom:-5px;'> <img style='float:left;margin:0 3px 0px 3px;' src='"+hintimg+"' /> <span id='hintinfoup'>"+info+"</span> </div> <p style='margin:0; padding:0;'> <img src='"+bottomimg+"'/> </p> </div> <iframe id='hintiframe' style='position:absolute;z-index:100;width:276px;scrolling:none;' frameborder='0'></iframe>";
    //以上是自己修改
//    document.getElementById('hintiframe'+showtype).style.height= objheight + "px";
//    var frame;
//    frame=document.getElementById('hintiframe'+showtype).style.height;
//    document.getElementById('hintinfo'+showtype).innerHTML = info;
//    document.getElementById('hintdiv'+showtype).style.display='block';
    document.getElementById('hintdiv').style.display='block';

        if(objtopoffset == 0)
        {
            document.getElementById("hintdiv").innerHTML=html;
            if(showtype=="up")
            {
                document.getElementById('hintiframe').style.height= objheight + "px";
                document.getElementById('hintdiv').style.top=(p['y']-document.getElementById('hintinfo'+showtype).offsetHeight-43)+"px";
            }
            else
            {
                document.getElementById('hintiframe').style.height= objheight + "px";
                document.getElementById('hintdiv').style.top=p['y']+obj.offsetHeight+3+"px";
            }
        }
        else
        {
            document.getElementById('hintdiv').style.top=p['y']+objtopoffset+"px";
        }

    document.getElementById('hintdiv').style.left=p['x']+objleftoffset+"px";
}
    
function hidehintinfo()
{
    document.getElementById('hintdiv').style.display='none';
//    document.getElementById('hintdivdown').style.display='none';
}
function getposition(obj)
{
    var r = new Array();
    r['x'] = obj.offsetLeft;
    r['y'] = obj.offsetTop;
    while(obj = obj.offsetParent)
    {
        r['x'] += obj.offsetLeft;
        r['y'] += obj.offsetTop;
    }
    return r;
}