Как вы предотвращаете переполнение всплывающих окон границами области просмотра?

Question

Я пытаюсь динамически добавлять аннотации на график Highcharts. Если вы перейдете к моему Codepen Example и нажмете одну из точек данных рядом с экстремумом диаграммы, вы увидите, что всплывающее окно может быть затенено.

Я пытался использовать загрузочный поповер «.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()

Проблема, с которой я сталкиваюсь, заключается в том, что при нажатии на точку данных рядом с одним из краев диаграммы всплывающее окно может быть обрезано. Как я могу предотвратить переполнение всплывающего окна за пределами области просмотра?

Я попробовал предложение Кшиштофа Янишевского. Однако у поповера все еще были некоторые нежелательные черты. Например, он будет уплывать от точки данных при изменении размера. Если данные прокручиваются, они не остаются с точкой данных.

Я решил попробовать что-то еще. Я поместил свою форму внутри аннотации, которая добавляется в точку, когда на нее нажимают. При сохранении формы аннотация удаляется и заменяется новой аннотацией, содержащей данные из формы.

У этого есть несколько интересных преимуществ, таких как расположение поповера, обрабатываемого Highcharts, так что нет проблем с границами. Форма также остается с точкой данных при изменении размера или при прокрутке данных. Я обновил Codepen Example , чтобы показать эти эффекты. Я забыл раскошелиться на Codepen, и мой оригинал был перезаписан, извините.

Единственные проблемы, которые я пытаюсь преодолеть на данный момент, по-видимому, связаны с порядком слоев или каким-либо z-индексом. Я применил некоторые jquery, чтобы помочь сосредоточиться на входных данных формы, но у меня все еще есть проблемы. Например, попробуйте создать аннотацию или заметку. Затем попробуйте выбрать текст с помощью мыши. Вместо того, чтобы выделять текст мышью, кажется, что мышь управляет диаграммой позади всплывающего окна и вместо этого увеличивает масштаб диаграммы.

Любые идеи о том, как сделать эту форму в верхней части таблицы? Имеет смысл, что это не так, поскольку это действительно аннотация, но в этом случае было бы хорошо переопределить только форму.

Answer 1

Здесь я сделал копию вашего CodePen

Он работает более или менее так, как вы хотели.

Принцип довольно прост.Если всплывающее окно находится вне области просмотра, вы меняете его положение так, чтобы оно находилось внутри области просмотра.

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