点击位置响应问题打开弹出窗口

Question

我在窗口上触发了弹出式点击。必须在触发事件的任何地方显示弹出窗口。但是存在一些问题

弹出窗口必须显示在当前可见窗口。意思是，如果我点击窗口的大部分窗口的右下角那么隐藏在右侧窗口的小窗口中

那么如何改变位置取决于屏幕尺寸还是其他一些选择？

var xpos = 0; // mouse x position
var ypos = 0; // mouse y position
var mouseYPos = 0; // mouse y position from top of the screen where we clicked
var mouseXPos = 0; // mouse x position from left of the screen where we clicked
var screenHeight = screen.height; //Actual height of the screen
    var screenWidth  = screen.width; //Actual width of the screen
    //mouseYPos - mouse clicked position from top of the screen 
    if (mouseYPos < 110)
    {
        ypos = ypos + 50;
    } else if ((mouseYPos > 111)&&(mouseYPos < 500))
    {
        ypos = ypos - 0;
    } 
    else if (mouseYPos > 501)
    {
        ypos = ypos -210;
    } 
//mouseXPos - mouse clicked position from left of the screen 

    if ((mouseXPos+ 50) > screenWidth)
    {
        xpos = xpos - 220;
    }
    if (!winCal)
    {
        headID = document.getElementsByTagName("head")[0];

        // add javascript function to the span cal
        e = document.createElement("script");
        e.type = "text/javascript";
        e.language = "javascript";
        e.text = funcCalback;
        headID.appendChild(e);
        // add stylesheet to the span cal

        cssStr = ".calTD {text-align: center; border:0; }\n";
        cssStr += ".calR {text-align: center; font-weight: bold;}";

        style = document.createElement("style");
        style.type = "text/css";
        style.rel = "stylesheet";
        if (style.styleSheet)
        { // IE
            style.styleSheet.cssText = cssStr;
        }
        else
        { // w3c
            cssText = document.createTextNode(cssStr);
            style.appendChild(cssText);
        }

        headID.appendChild(style);
        // create the outer frame that allows the cal. to be moved
        span = document.createElement("span");
        span.id = calSpanID;
        span.style.position = "absolute";
        span.style.left = (xpos + CalPosOffsetX) + 'px';
        span.style.top = (ypos - CalPosOffsetY) + 'px';
        span.style.width = CalWidth + 'px';
        //span.style.border = "solid 1pt " + SpanBorderColor;
        span.style.padding = "0";
        //span.style.cursor = "move";
        //span.style.backgroundColor = SpanBgColor;
        span.style.zIndex = 100;
        document.body.appendChild(span);
        winCal = document.getElementById(calSpanID);
    }
    else
    {
        winCal.style.visibility = "visible";
        winCal.style.Height = calHeight;

        // set the position for a new calendar only
        if (bNewCal === true)
        {
            winCal.style.left = (xpos + CalPosOffsetX) + 'px';
            winCal.style.top = (ypos - CalPosOffsetY) + 'px';
        }
    }

    winCal.innerHTML = winCalData + vCalHeader + vCalData + vCalTime + vCalClosing;
    return true;
}