@Sergey_5

Позиционирование модального окна?

Помогите решить вопрос с позиционированием модального окна.

Есть блок с фиксированными размерами и overflow: scroll; (class="content").
Внутри блок по размеру больше, соответственно есть прокрутка (class="content__box").

Нужно чтобы модальное окно появлялось по клику в месте клика и не выходило за пределы первого блока (class="content").

Уже совсем запутался

Песочница
https://jsfiddle.net/SergeyA_/6kx84qa2/174/
  • Вопрос задан
  • 49 просмотров
Пригласить эксперта
Ответы на вопрос 1
Kozack
@Kozack Куратор тега JavaScript
Thinking about a11y
  1. В момент клика, перед тем как сделать всплывающее окно видимым вы считываете позицию указателя (координаты x, y). Это предварительные координаты для вашей модалки.
  2. Далее вы вычисляете размер самой модалки. И проверяете не вылезет ли она за границы экрана. Например: если Х координата + Ширина модалки больше чем ширина контейнера -- сдвинуть мобалку в лево настолько чтобы она помещалась.
  3. Применить полученные значения позиционирования к элементу и сделать его видимым.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы