• 技术文章 >web前端 >html教程

    DIV+CSS弹出提示框脚本_html/css_WEB-ITnose

    2016-06-24 12:31:17原创895

    DIV+CSS弹出提示框脚本,效果如下:

    JS代码如下

    Code
    /*
    使用方法:
    直接调用showhint()方法即可,showhint()方法中参数说明:obj为要显示提示信息的控件对象,info为提示内容
    例:
    onmouseover="showhint(this,'这是地球人都知道的东西,没什么好提示的。')"
    onmouseout="hidehintinfo()"
    */
    document.write("");
    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="

    "+info+"

    ";
    //以上是自己修改
    // 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("");
    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="

    "+info+"

    ";
    //以上是自己修改
    // 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;
    }

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:div+css命名规则 转自www.huashifu.net_html/css_WEB-ITnose 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • jquery的each,map,has• 七个你可能不了解的CSS单位_html/css_WEB-ITnose• 这样的下拉效果如何实现?_html/css_WEB-ITnose• 绝对定位和浮动的问题,求大神帮忙解决_html/css_WEB-ITnose• 使用meta实现页面的定时刷新或跳转_html/css_WEB-ITnose
    1/1

    PHP中文网