Making a popup (which is a DIV containing a panel consist of textbox and a button) to float within the map DIV only

Question

The HTML for the popup is:

<div id="commentBox" class="commentBox">
  <div class="panel panel-default">
    <div class="panel-body">
       <input type="text" value="" id="annotationText" />
       <button type="button" ng-click="setComment()">OK</button>
    </div>
   </div>
</div>

CSS:

.commentBox {
    position: absolute;
    z-index: 9999;
    left: 72px;
    top: 58px; 
    display:none;
}

#commentBox:before {
    position: absolute;
    top: -7px;
    left: 1px;
    display: inline-block;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #ccc;
    border-left: 7px solid transparent;
    border-bottom-color: rgba(0, 0, 0, 0.2);
    content: '';
}

#commentBox:after {
    position: absolute;
    top: -6px;
    left: 0px;
    display: inline-block;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #ffffff;
    border-left: 6px solid transparent;
    content: '';
}

The commentBox:after and commentBox:before are the small arrow-tip and it's shadow on top-right corner of commentBox.

Issue: when I click on map on extreme right-side the popup-div shows outside of the main Map Div. Please refer below screenshot.

When clicked somewhere else:

How do I make this DIV to display within the limits of MAP DIV when clicked extreme right on MAP?

Answer 1

I added few of new CSS classes to get this done

.commentDiamond {
        background: #F7F7F7;
        display: block;
        height: 16px;
        position: absolute;
        width: 16px;
        z-index: -1;
        transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        box-shadow: 0 0 0.75em #777777;
        -webkit-box-shadow: 0 0 0.75em #777777;
    }

.commentDiamond.topleft {
    left: 5px;
    top: -6px;
}

.commentDiamond.topright {
    right: 5px;
    top: -6px;
}

.commentDiamond.bottomleft {
    left: 5px;
    top: 45px;
}

.commentDiamond.bottomright {
    right: 5px;
    top: 45px;
}

And then in JS file checked for the screen point and conditioned asper my requirement and then showed the required CSS classes from above list.

if (scrn_pt.x > (mapwidth - $("#commentBox").width() + 10) && scrn_pt.y > (mapHeight - $("#commentBox").height())) {
    $('#commentDiamond').removeClass();
    $('#commentDiamond').addClass("commentDiamond bottomright");
    $("#commentBox").css({
        left: scrn_pt.x - 187 + "px",
        top: scrn_pt.y - 13 + "px"
    });
    $('#commentBox').show();
    $('#annotationText').focus();
} else if (scrn_pt.x > (mapwidth - $("#commentBox").width())) {
    $('#commentDiamond').removeClass();
    $('#commentDiamond').addClass("commentDiamond topright");
    $("#commentBox").css({
        left: scrn_pt.x - 187 + "px",
        top: scrn_pt.y + 60 + "px"
    });
    $('#commentBox').show();
    $('#annotationText').focus();
} else if (scrn_pt.y > (mapHeight - $("#commentBox").height())) {
    $('#commentDiamond').removeClass();
    $('#commentDiamond').addClass("commentDiamond bottomleft");
    $("#commentBox").css({
        left: scrn_pt.x + 1 + "px",
        top: scrn_pt.y - 13 + "px"
    });
    $('#commentBox').show();
    $('#annotationText').focus();
} else {
    $('#commentDiamond').removeClass();
    $('#commentDiamond').addClass("commentDiamond topleft");
    $("#commentBox").css({
        left: scrn_pt.x + 1 + "px",
        top: scrn_pt.y + 60 + "px"
    });
    $('#commentBox').show();
    $('#annotationText').focus();
}

Now the popup look like these: