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:

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?

Mayur Shinde · Answer

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:

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

One Answer

Add your own answers!

Ask a Question