高分求解，JS弹出层位置的问题，有源代码

问题很简单，就是位置不正确，高手请运行看下面的代码：<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>mydiv</title>
<script language="javascript">
var swtemp=0,objtemp;
var timer;function getobj(o){//获取对象
return document.getElementById(o)
}function Mout(o){
timer=setTimeout(function(){o.style.display="none";},300)
swtemp=0;
}function hiddiv(e,inputid){//隐藏层
    e=e||window.event;
    ev=e.target||e.srcElement;
    v=ev.innerText||ev.textContent;
    if (v!="clear")
{getobj(inputid).value=v;}
else 
{getobj(inputid).value=""}
getobj(inputid+"mydiv").style.display="none";
}function crertdiv(_parent,_element,_id,_css){//创建层
var newObj=document.createElement(_element);
if(_id && _id!=""){newObj.id=_id;}
if(_css && _css!=""){newObj.setAttribute("style",_css);newObj.style.cssText = _css;}
if(_parent && _parent!=""){
var theObj=getobj(_parent);
var parent = theObj.parentNode;
if(parent.lastChild == theObj)
{theObj.appendChild(newObj);}
else
{theObj.insertBefore(newObj, theObj.nextSibling);}
}else{document.body.appendChild(newObj);}
}function showdiv(inputid,inputtext){//显示层
if (swtemp==1){getobj(objtemp+"mydiv").style.display="none";}
if (!getobj(inputid+"mydiv")){//若尚未创建就建之
var divcss="width:150px;height:100px;background-color:#FFFFFF;OVERFLOW:auto;z-index:99;border:1px solid #000000;font-size:12px;position:absolute;left:"+(getobj(inputid).offsetLeft)+"px;top:"+(getobj(inputid).offsetTop+25)+"px"
    crertdiv("","div",inputid+"mydiv",divcss);//创建层"mydiv"
}
getobj(inputid+"mydiv").innerHTML=inputtext;
var newdiv=getobj(inputid+"mydiv");
newdiv.onclick=function(){hiddiv(event,inputid);}
newdiv.onmouseout=function(){Mout(this)}
newdiv.onmouseover=function(){clearTimeout(timer)}
getobj(inputid).onmouseout=function(){Mout(newdiv)}
newdiv.style.display="block";
swtemp=1;
objtemp=inputid;
}</script>
</head>
<body>
<table>
<tr><td>这个位置不正确<input id="mydiv" onclick="showdiv(this.id,'位置不正确')"></td></tr>
<tr><td></td></tr>
</table>
<br>
<br>
<br>
这个位置是正确的：<input id="mydiv2" onclick="showdiv(this.id,'位置正确')">
</body>
</html>

解决方案 »

  1.   


    多谢这位大哥，还是不行哦。
    你看我的代码里，我用的是 position:absolute;这两者有区别吗？
      

  2.   

    var divcss="width:150px;height:100px;background-color:#FFFFFF;OVERFLOW:auto;z-index:99;border:1px solid #000000;font-size:12px;position:absolute;left:"+(getobj(inputid).offsetLeft)+"px;top:"+(getobj(inputid).offsetTop+25)+"px"这里的问题, 计算offsetLeft的时候, 过于简单. 个人感觉浏览器解析offsetLeft和offsetTop的值太复杂了, 特别是镶嵌到了table里(table最容易引发奇怪的样式问题) .
    这个语句需要加强, 要针对各种情况写hack, 太麻烦了...所以我用了jquery解决. 鄙视我吧
    var divcss="width:150px;height:100px;background-color:#FFFFFF;OVERFLOW:auto;z-index:99;border:1px solid #000000;font-size:12px;position:absolute;left:"+($(getobj(inputid)).offset().left)+"px;top:"+($(getobj(inputid)).offset().top+25)+"px"
      

  3.   


    感谢这位大哥，你说得太对了，计算offsetLeft的时候, 过于简单。
    我也知道问题出在这里，但是我在网上找了些复杂的算法来，又不知道应该怎么用，呵呵，别笑话我。
    所以，才来此求高手赐教。
      

  4.   

    对offset加以处理，以下方法可用 ：
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>mydiv</title>
    <script language="javascript">
    var swtemp=0,objtemp;
    var timer;function getobj(o){//获取对象
        return document.getElementById(o)
    }function Mout(o){
        timer=setTimeout(function(){o.style.display="none";},300)
        swtemp=0;
    }function hiddiv(e,inputid){//隐藏层
        e=e||window.event;
        ev=e.target||e.srcElement;
        v=ev.innerText||ev.textContent;
        if (v!="clear")
            {getobj(inputid).value=v;}
        else 
            {getobj(inputid).value=""}
        getobj(inputid+"mydiv").style.display="none";
    }function crertdiv(_parent,_element,_id,_css){//创建层
        var newObj=document.createElement(_element);
        if(_id && _id!=""){newObj.id=_id;}
        if(_css && _css!=""){newObj.setAttribute("style",_css);newObj.style.cssText = _css;}
        if(_parent && _parent!=""){
            var theObj=getobj(_parent);
            var parent = theObj.parentNode;
            if(parent.lastChild == theObj)
                {theObj.appendChild(newObj);}
            else
                {theObj.insertBefore(newObj, theObj.nextSibling);}
        }else{document.body.appendChild(newObj);}
    }function showdiv(inputid,inputtext){//显示层
        if (swtemp==1){getobj(objtemp+"mydiv").style.display="none";}
        if (!getobj(inputid+"mydiv")){//若尚未创建就建之
            var divcss="width:150px;height:100px;background-color:#FFFFFF;OVERFLOW:auto;z-index:99;border:1px solid #000000;font-size:12px;position:absolute;left:"+(getOffsetLeft(getobj(inputid)))+"px;top:"+(getOffsetTop(getobj(inputid))+25)+"px"
               crertdiv("","div",inputid+"mydiv",divcss);//创建层"mydiv"
        }
        getobj(inputid+"mydiv").innerHTML=inputtext;
        var newdiv=getobj(inputid+"mydiv");
        newdiv.onclick=function(){hiddiv(event,inputid);}
        newdiv.onmouseout=function(){Mout(this)}
        newdiv.onmouseover=function(){clearTimeout(timer)}
        getobj(inputid).onmouseout=function(){Mout(newdiv)}
        newdiv.style.display="block";
        swtemp=1;
        objtemp=inputid;
    }
    function getOffsetLeft(obj){
       var iOffsetLeft=obj.offsetLeft;
       while(obj.offsetParent){
           obj = obj.offsetParent;
           iOffsetLeft += obj.offsetLeft;
       }
       return iOffsetLeft;
    }
    function getOffsetTop(obj){
       var iOffsetTop =obj.offsetTop;
       while(obj.offsetParent){
           obj = obj.offsetParent;
           iOffsetTop += obj.offsetTop;
       }
       return iOffsetTop;
    }
    </script>
    </head>
    <body>
    <table>
        <tr><td>这个位置不正确<input id="mydiv" onclick="showdiv(this.id,'位置不正确')"></td></tr>
        <tr><td></td></tr>
    </table>
    <br>
    <br>
    <br>
    这个位置是正确的：<input id="mydiv2" onclick="showdiv(this.id,'位置正确')">
    </body>
    </html>
      

  5.   


    多谢这位大哥，你的方法果然有用!
    再请教你个简单的问题，这段代码中有 newdiv.onmouseout=...也就是说，当鼠标离开这个弹出层的时候，弹出层就隐藏了。我不想这样。
    我想，鼠标离开这个弹出层的时候，它还是显示着的，只有当鼠标单击了页面的其它地方时才把它隐藏。
    请问这如何代码？非常感谢！
      

  6.   


    多谢这位大哥，你的方法果然有用!
    再请教你个简单的问题，这段代码中有 newdiv.onmouseout=...也就是说，当鼠标离开这个弹出层的时候，弹出层就隐藏了。我不想这样。
    我想，鼠标离开这个弹出层的时候，它还是显示着的，只有当鼠标单击了页面的其它地方时才把它隐藏。
    请问这如何代码？非常感谢！
      

  7.   

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>mydiv</title>
    <script language="javascript">
    var swtemp=0,objtemp;
    var timer;function getobj(o){//获取对象
        return document.getElementById(o)
    }function Mout(o){
        timer=setTimeout(function(){o.style.display="none";},300)
        swtemp=0;
    }function hiddiv(e,inputid){//隐藏层
        e=e||window.event;
        ev=e.target||e.srcElement;
        v=ev.innerText||ev.textContent;
        if (v!="clear")
            {getobj(inputid).value=v;}
        else 
            {getobj(inputid).value=""}
        getobj(inputid+"mydiv").style.display="none";
    }function crertdiv(_parent,_element,_id,_css){//创建层
        var newObj=document.createElement(_element);
        if(_id && _id!=""){newObj.id=_id;}
        if(_css && _css!=""){newObj.setAttribute("style",_css);newObj.style.cssText = _css;}
        if(_parent && _parent!=""){
            var theObj=getobj(_parent);
            var parent = theObj.parentNode;
            if(parent.lastChild == theObj)
                {theObj.appendChild(newObj);}
            else
                {theObj.insertBefore(newObj, theObj.nextSibling);}
        }else{document.body.appendChild(newObj);}
    }function showdiv(inputid,inputtext){//显示层
        if (swtemp==1){getobj(objtemp+"mydiv").style.display="none";}
        if (!getobj(inputid+"mydiv")){//若尚未创建就建之
            var divcss="width:150px;height:100px;background-color:#FFFFFF;OVERFLOW:auto;z-index:99;border:1px solid #000000;font-size:12px;position:absolute;left:"+(getOffsetLeft(getobj(inputid)))+"px;top:"+(getOffsetTop(getobj(inputid))+25)+"px"
               crertdiv("","div",inputid+"mydiv",divcss);//创建层"mydiv"
        }
        getobj(inputid+"mydiv").innerHTML=inputtext;
        var newdiv=getobj(inputid+"mydiv");
        newdiv.onclick=function(){hiddiv(event,inputid);}
       // newdiv.onmouseout=function(){Mout(this)}
        newdiv.onblur=function(){Mout(this);}
        newdiv.onmouseover=function(){clearTimeout(timer);this.focus();}
       // getobj(inputid).onmouseout=function(){Mout(newdiv)}
        newdiv.style.display="block";
        swtemp=1;
        objtemp=inputid;
        newdiv.focus();
    }
    function getOffsetLeft(obj){
       var iOffsetLeft=obj.offsetLeft;
       while(obj.offsetParent){
           obj = obj.offsetParent;
           iOffsetLeft += obj.offsetLeft;
       }
       return iOffsetLeft;
    }
    function getOffsetTop(obj){
       var iOffsetTop =obj.offsetTop;
       while(obj.offsetParent){
           obj = obj.offsetParent;
           iOffsetTop += obj.offsetTop;
       }
       return iOffsetTop;
    }
    </script>
    </head>
    <body>
    <table>
        <tr><td>这个位置不正确<input id="mydiv" onClick="showdiv(this.id,'位置不正确')"></td></tr>
        <tr><td></td></tr>
    </table>
    <br>
    <br>
    <br>
    这个位置是正确的：<input id="mydiv2" onClick="showdiv(this.id,'位置正确')">
    </body>
    </html>
      

  8.   


    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>mydiv</title>
    <script type="text/javascript" src="jquery/jquery.js"></script>
    <script language="javascript">
    var swtemp=0,objtemp;
    var timer;function getobj(o){//获取对象
        return document.getElementById(o)
    }function Mout(o){
    //#修改
        //timer=setTimeout(function(){o.style.display="none";},300)
        //swtemp=0;
    o.style.display = "none";
    swtemp = 0;
    }//#修改
    function acc(e){
    var elems = $(".CDiv");
    $(elems).css('display', 'none');
    }function hiddiv(e,inputid){//隐藏层
        e=e||window.event;
        ev=e.target||e.srcElement;
        v=ev.innerText||ev.textContent;
        if (v!="clear")
            {getobj(inputid).value=v;}
        else 
            {getobj(inputid).value=""}
        getobj(inputid+"mydiv").style.display="none";
    }function crertdiv(_parent,_element,_id,_css){//创建层
        var newObj=document.createElement(_element);
        if(_id && _id!=""){newObj.id=_id; newObj.className = "CDiv";}
        if(_css && _css!=""){newObj.setAttribute("style",_css);newObj.style.cssText = _css;}
        if(_parent && _parent!=""){
            var theObj=getobj(_parent);
            var parent = theObj.parentNode;
            if(parent.lastChild == theObj)
                {theObj.appendChild(newObj);}
            else
                {theObj.insertBefore(newObj, theObj.nextSibling);}
        }else{document.body.appendChild(newObj);}
    }function showdiv(inputid,inputtext){//显示层
        if (swtemp==1){getobj(objtemp+"mydiv").style.display="none";}
        if (!getobj(inputid+"mydiv")){//若尚未创建就建之
            var divcss="width:150px;height:100px;background-color:#FFFFFF;OVERFLOW:auto;z-index:99;border:1px solid #000000;font-size:12px;position:absolute;left:"+($(getobj(inputid)).offset().left)+"px;top:"+($(getobj(inputid)).offset().top+25)+"px"
               crertdiv("","div",inputid+"mydiv",divcss);//创建层"mydiv"
        }
        getobj(inputid+"mydiv").innerHTML=inputtext;
        var newdiv=getobj(inputid+"mydiv");
        
    //#修改
        //newdiv.onmouseout=function(){Mout(this)}
    document.body.onclick = function(e){
    if($(e.target).is("input")){return;}
    acc(e);
    }
    newdiv.onclick=function(event){hiddiv(event,inputid);}
        newdiv.onmouseover=function(){clearTimeout(timer)}
        
    //#修改
    //getobj(inputid).onmouseout=function(){Mout(newdiv)}
        newdiv.style.display="block";
        swtemp=1;
        objtemp=inputid;
    }</script>
    </head>
    <body>
    <table>
        <tr><td>这个位置不正确<input id="mydiv" onclick="showdiv(this.id,'位置不正确')"></td></tr>
        <tr><td></td></tr>
    </table>
    <br>
    <br>
    <br>
    这个位置是正确的：<input id="mydiv2" onclick="showdiv(this.id,'位置正确')">
    </body>
    </html>修改的地方我加了注释了. 时间紧直接用的jquery. 汗个~~
      

  9.   

    楼主注意下这个地方  newdiv.onclick=function(){hiddiv(event,inputid);}
    这样写在firefox下不能运行，得改成 newdiv.onclick=function(event){hiddiv(event,inputid);}
      

  10.   

    真是热心人啦，多谢楼上两位大哥，特别是root_lee大哥，多谢了！