javascript - 如何防止弹出窗口溢出视口(viewport)边界？

Question

我正在尝试向 Highcharts 图表动态添加注释。如果你去我的Codepen Example并单击图表极值附近的数据点之一，您会看到弹出框可能会变得模糊。

我试图为此使用 Bootstrap 弹出窗口“.popover()”，但似乎没有办法将弹出窗口定位在鼠标单击点。所以我从这个 question 中得到了一些建议.

$('#popover').css('left', (selected_point.x+15) +'px')
$('#popover').css('top',  (selected_point.y-(selected_point.h/2)-12) +'px')
$('#popover').show()
$("#annotation_text").focus()

我遇到的问题是，当单击图表边缘之一附近的数据点时，弹出窗口可能会被切断。如何防止弹出窗口溢出到视口(viewport)之外？

我尝试了 KrzysztofJaniszewski 的建议。然而，弹出框仍然有一些不受欢迎的特性。例如，它会在调整大小时远离数据点。如果数据滚动，它不会留在数据点上。

我决定尝试别的东西。我已将我的表单放在一个注释中，该注释在单击时添加到一个点。保存表单时，注释将被删除并替换为包含表单数据的新注释。

这有一些很酷的优势，例如由 Highcharts 处理的弹出窗口的定位，因此不存在边界问题。在调整大小时或滚动数据时，表单也会保留其数据点。我已经更新了 Codepen Example来展示这些效果。我忘了 fork Codepen，所以我原来的被覆盖了，抱歉。

此时我试图克服的唯一问题似乎与图层顺序或某种 z-index 有关。我应用了一些 jquery 来帮助关注表单输入，但我仍然遇到问题。例如，尝试创建注释或注释。然后尝试用鼠标选择文本。鼠标似乎不是在选择文本，而是在控制弹出框后面的图表，而是缩放图表。

关于如何使此表格位于图表顶部的任何想法？它不是有道理的，因为它实际上是一个注释，但在这种情况下，最好只覆盖表单。

Answer 1

我在这里复制了你的CodePen

它或多或少会按照您想要的方式工作。

原理很简单。如果弹出窗口即将超出视口(viewport)，您可以更改其位置，使其位于视口(viewport)内。

...
if (xPos > maxRight) {
    xPos = maxRight;
}
if (yPos > maxDown) {
    yPos = maxDown;
}
...