定位弹出层

2019独角兽企业重金招聘Python工程师标准>>>

把弹出层定位到点击位置右侧

（在10中 document.documentElement.clientHeight  document.documentElement.scrollTop 

   在03中 document.body.clientHeight   document.body.scrollTop）

<script type="text/javascript">
        //获取弹出层的显示位置
        function GetPos(obj) {
            var pos = new Object();
            pos.x = event.clientX;
            pos.y = event.clientY;

            return pos;
        }
        //设置层的位置和内容
        function showval(pos, str) {
            //加载数据
            document.getElementById("divInfo").style.cssText = "Z-INDEX:9999;display:block;position:absolute;width:300px;height:103px;border:1px solid #00BFFF;text-align:center;left:'+pos.x+'px;top:'+pos.y+'px;background:#ffffff;";
            var divWidth = parseInt(document.getElementById('divInfo').style.width);
            var divHeight = parseInt(document.getElementById('divInfo').style.height);

            document.getElementById("divInfo").style.left = pos.x + 10;
            if ((pos.y + divHeight) > document.documentElement.clientHeight)
            {
                document.getElementById("divInfo").style.top = parseInt(pos.y) + parseInt(document.documentElement.scrollTop) - divHeight;
            }
                else
            {
                document.getElementById("divInfo").style.top = parseInt(pos.y) + parseInt(document.documentElement.scrollTop);
            }
            document.getElementById("divInfo").innerHTML = str;
        }
        //弹出显示信息层
        function showInfo(obj, yuyueId)
        {
            var pos = GetPos();
            var str = Web_ShiZiTongChouDetails.ShowInfo(yuyueId).value;
            showval(pos, str);
        }
        //隐藏信息层
        function hiddenInfo()
        {
            document.getElementById("divInfo").innerHTML = "";
            document.getElementById("divInfo").style.cssText = "Z-INDEX:9999;display:none;position:absolute;width:300px;height:103px;border:1px solid #00BFFF;text-align:center;left:'+pos.x+'px;top:'+pos.y+'px;background:#ffffff;";
        }
    </script>

 

转载于:https://my.oschina.net/u/235267/blog/109551