Javascript 制作一个弹出窗口（这是一个包含面板的DIV-由文本框和按钮组成），以便只适合（浮动）在（映射）特定DIV中

弹出窗口的HTML为：

<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>

commentBox:after和commentBox:before是commentBox右上角的小箭头尖端及其阴影

问题：当我点击最右边的地图时，弹出的div显示在主地图div之外。请参考下面的屏幕截图

单击其他位置时：

---

当在地图上单击极右键时，如何使此DIV（弹出窗口）显示在地图DIV的限制范围内？

您可以通过类似下面的javascript帮助实现这一点

function onMapClick(event) {
  let comment =  document.getElementById('commentBox');
  let top = event.target.offsetTop + event.target.offsetHeight/2 - comment.offsetHeigth/2;
  let left = event.target.offsetLeft+ event.target.offsetWidth/2 - comment.offsetWidth/2;
  comment.style.left = left+"px";
  comment.style.top = top+"px";
  comment.style.display = "inline-block";
}

css

---

我添加了一些新的CSS类来完成这项工作

.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;
}

然后在JS文件中检查屏幕点，并根据我的要求进行调整，然后显示上面列表中所需的CSS类

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();
}

现在弹出窗口如下所示：

---

这张地图占据了整页吗？@Shashank不，它没有。它是整个页面的一部分。下面是包含“map”div的div（这个“accountMapSettings”div是整个页面的一部分）。accountMapSettings div占用整个页面是否正确？如果弹出窗口位于这个div的中间可以吗？@Shashank，accountMapSettings div是整个页面的一部分（页面也包含其他div），map div在accountMapSettings中。弹出窗口应该在用户单击地图的确切位置打开。当然，我会尝试一下，我会让你知道的。谢谢你的建议。

.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;
}

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();
}