如何鼠标点击div，弹窗出现在鼠标附近并在可视区域中

function form(id) {//点击事件获取到点击div得id
    var click = document.getElementById(id)//点击div得dom元素
    var alert = document.getElementById("details")//弹出层的dom元素
    click.onmouseup = function (e) {    
        var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
        var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
        var x = e.pageX || e.clientX + scrollX;
        var y = e.pageY || e.clientY + scrollY;
        var c =document.documentElement.scrollHeight-300

        if(y<=100){判断后弹出层就不会出现超出页面上方
            y = y+200
        }
        if(y>c){//弹出层不会超出页面下方
            y=y-300
        }
         alert.style.left = x + "px"
         alert.style.top =  y + "px"
         alert.style.display = "block";
         history.style.left = x +40+ "px"
         history.style.top =  y + "px"
    }
}码片