Question

I have several boxes (more than 100) that will be created dynamically in different positions on the screen. Upon clicking each box, I want a slide in pop up with the details.

I want its position to slide in near each boxes. I have done that, but, if some boxes are near the browser window end on the right side, half of the pop up gets hidden in the window.

I want those pop-ups to display fully before the window (as like in excel).

my javascript code for postioning;

function centerPopup(comp_id, top, left) {    
    $("#popupContact").css({
        "position": "absolute",
        "top": top + 70,
        "left": left + 223
    });
}

Answer 1

If I’m understanding your question correctly it’s not the overlap with other boxes but losing half the box on the edges of the screen? This sounds like you’re using the edge of the window to set the position of the box but you aren’t accounting for the width of the box itself. Make sure to get the width of the current box divided by two and subtract this from the max window size. This will position the right edge of your box at the right side of the window (if you imagine a box rendered at the far right of the screen).

Hopefully I’m interpreting your question correctly.