javascript - 制作一个弹出窗口(这是一个包含面板的 DIV - 由文本框和一个按钮组成)以仅适合( float )在( map )特定的 DIV 中

Question

弹出窗口的 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>

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: '';
}

commentBox:after 和 commentBox:before 是小箭头提示，它是 commentBox 右上角的阴影。

问题:当我单击最右侧的 map 时，弹出式 div 显示在主 map Div 之外。请引用下面的屏幕截图。

点击其他地方时:

在 MAP 上单击最右侧时，如何使此 DIV(弹出窗口)显示在 MAP DIV 的范围内？

Answer 1

你可以借助像这样的 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

.commentBox {
   position: absolute;
   z-index: 10;
}