popup-positioning-experiment

by shyamh

HTML

<div>
     <h1>popup example</h1>
    <div>This is a scratch pad for experimenting</div>
    <div class="container container1">
        <div class="popup popup1">This is popup content</div>
        <div>This is normal content</div>
        <div>This is more content that it in the parent element content</div>
    </div>
    <div>some random stuff</div>
    <div class="container container2">
        <div class="popup popup2">This is popup content</div>
        <div>This is normal content</div>
        <div>This is more content that it in the parent element content</div>
    </div>

</div>

CSS

body {
    font-family: Arial;
}

.container {
    border: 1px solid lightgray;
    background-color: lightgray;
    width: 250px;
    margin: 20px 100px;
    /* test various position values and verify the popup anchors correctly */
    /* position: absolute; */
}

.popup {
    /* IMPORTANT Part of the work is to have the popup position as absolute */
    position: absolute;
    display: block;
    width: 80px;
    height: auto;
    background-color: lightyellow;
    padding: 10px;
    border: 1px solid gray;
    border-radius: 7.5px;
    box-shadow: 3px 3px 5px #ececec;
}

JavaScript

var container_offsets1 = $(".container1").offset(),
    popup_offsets1 = {
        top: 10 + container_offsets1.top,
        left: 240 + container_offsets1.left
    },
    container_offsets2 = $(".container2").offset(),
    popup_offsets2 = {
        top: 40 + container_offsets2.top,
        left: -90 + container_offsets2.left
    };

$(".popup1").offset(popup_offsets1);
$(".popup2").offset(popup_offsets2);