Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.07.2017, 07:42
Интересующийся
Отправить личное сообщение для Prowler Посмотреть профиль Найти все сообщения от Prowler
 
Регистрация: 09.07.2008
Сообщений: 28

координаты в модальном окне
Добрый день!
Есть модальное окно имеющее следующую структуру:
Код:
              
                #overlay
                {
                        position: fixed;
                        background-color: rgba(0,0,0, 0.7);
                        left: 0;
                        top: 0;
                        height: 100%;
                        width: 100%;
                        overflow: auto;
                }
                #modal
                {
                        position: absolute;
                        left: 50%;
                        top: 50px;
                        transform: translateX(-50%);
                }
 <div id="overlay">
<div id="modal">
</div>
</div>
В #modal создается еще div в котором создается canvas. Размеры канвы и созданного дива задаются программно и размер зависит от картинки. Размер по вертикале становится больше чем окно браузера и появляются полосы прокрутки (на элементе #overlay).
Задача состоит в том, чтобы вычислить позиции курсора на канве. Т.е. нужно знать координаты на канве в области которая не поместилась на экране, смещена и открывается после прокрутки. pageYOffset не подходит, т.к. показывает смещение не в модальном окне, а по факту на Body.
Ответить с цитированием
  #2 (permalink)  
Старый 18.07.2017, 08:59
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от Prowler
pageYOffset не подходит, т.к. показывает смещение не в модальном окне, а по факту на Body
https://developer.mozilla.org/ru/doc...dingClientRect
и
http://javascript.ru/ui/offset
Ответить с цитированием
  #3 (permalink)  
Старый 18.07.2017, 19:30
Интересующийся
Отправить личное сообщение для Prowler Посмотреть профиль Найти все сообщения от Prowler
 
Регистрация: 09.07.2008
Сообщений: 28

laimas,
видимо, я плохо описал ситуацию. Итак, в созданный канвас выводится изображение, высота которого больше тела документа. Т.к. скрол добаляется на overlay то pageYOffset не меняется при скроллировании div с канвас. На канве внизу справа выводится другое изображение, при наведении на некоторые точки его нужно что-то делать. Т.е. я рисую изображение в области, координаты которой зависят от размера первого рисунка. Когда это изображение нарисовано за пределами документа - координаты не совпадают. Например, если картинка исходная большая по высоте и высота документа меньше (900px), то максимальная высота pageY будет 900. Но при этом картинка в углу выведена в координатах 1200. Чтобы добраться до этих координат, нужно скроллировать overlay. И так мы и получим, что мышка ходит в координатах 900, а картинка больше возможной области. Т.е. вот эти 300, что должны быть offset не знаю как можно получить. Есть мысль выводить вместе со вторым изобрмажанием на канве за ней еще div в тех же координатах и по нему высчитывать реальные координаты. Но какой-то костыль выходит.
Ответить с цитированием
  #4 (permalink)  
Старый 18.07.2017, 19:54
Интересующийся
Отправить личное сообщение для Prowler Посмотреть профиль Найти все сообщения от Prowler
 
Регистрация: 09.07.2008
Сообщений: 28

laimas,
нашел свою ошибку - getBoundingClientRect при скроле и уходе элемента за экран показывает его координаты относительно и они становятся отрицательными. Завтра буду подумать, сегодня голова уже не хочет работать.
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Галерея в модальном окне booch jQuery 2 20.11.2015 00:30
Не работает скрипты в модальном окне igorfelix Общие вопросы Javascript 13 22.03.2015 13:41
Не работает JavaScript в модальном окне Dealaxer Общие вопросы Javascript 5 07.03.2015 23:02
Получение элемента в модальном окне any.zicky Библиотеки/Тулкиты/Фреймворки 1 31.08.2012 16:36
Вопрос по реализации формы в простейшем модальном окне battrack jQuery 2 22.04.2012 13:46