javascript - 如何防止弹出框溢出视口边界？

Question

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

我试图为此使用引导弹出窗口“.popover（）”，但似乎没有办法将弹出窗口定位在鼠标点击点。所以我从这个问题中得到了一些指示。

$('#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()

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

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

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

这有一些很酷的优点，例如由 Highcharts 处理的弹出框的定位，因此没有边界问题。在调整大小或滚动数据时，表单也会保留其数据点。我更新了Codepen 示例以显示这些效果。我忘记分叉 Codepen，所以我的原件已被覆盖，抱歉。

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

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

标签： javascriptjquerycsshighchartsbootstrap-4

Answer 1

在这里我复制了你的CodePen

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

原理很简单。如果弹出框即将超出视口，则更改其位置以使其位于视口内。

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