Как показать всплывающее окно по центру видимой области на мобильном устройстве?

Question

[bezvozni]

Или какие ещё варианты, учитывая, что пользователь будет разглядывать html таблицу в 2х-3х приближении и окно должно всплывать при клике на ячейку? Брать координаты ячейки и по ним отсвечивать окно? Пример как должно быть можно приблизить, нажать и получить окошко прямо в по центру экрана сразу

Answer 1

[strelok011]

Никак (условно). Идея использовать модалку на мобиле - забейте гвоздь в голову придумавшему. Смотрите гайдлайны по мобильной разработке и забудьте про ховеры, модалки, прижатые к подвалу футеры. Вы не отследите на раз, что за железяка, выдвигаются ли у нее снизу и сверху кнопки навигации, браузерная строка и проч...
Все подобные десктопные выдумки добавят вам тонны работы, стилей, нежданых багов и прочего развлечения за деньги заказчика
Накипело.

Comments

[bezvozni]

Ну класс, мне адаптацию свести к "иди в ПК!"? Таблица 16 на 27, в каждой ячейке цифра, человек выбирает, сложно тапнуть - приближает. Все ок. Но при нажатии на некоторые нужно запросить с человека буквально два слова. Можете подробней про гайдлайны по мобильной разработке?

[strelok011]

Модалку - делать на полный экран, накрывать весь контент, чтобы это выглядело отдельным экраном, быть готовым к тому, что снизу неотлавливаемые кнопки браузера могут перекрывать контент на андроиде, добавлять пустое место для отступа, если внизу будет сабмит.
И да - табличные данные на мобиле? Однозначно "иди на ПК". У вас не курсор а палец, который может накрыть 10% экрана. Дизайнер, который придумывает такие кейсы... ну, сомнительный дизайнер.
Гайдлайны - да на сайтах гугла и эппла для разработчиков. У гугла material-ui, у эппла свое, связанное с интерфейсом. Нужно и на гайды для мобильных приложений смотреть. Модалки на телефоне? :)))

Альтернативное предложение - почему бы под строкой, куда ткнули, не добавлять строку с формой, раздвигающей контент и подсвечивать клетку нажатую? Всё равно извращаться...

[strelok011]

Ну и еще - таблица 16 на 27? на мобиле? серьезно?? Данные надо перестраивать в колонки по два, слева легенда, справа значение. Хотите - третья колонка с кнопкой для клика. Ближе к пользователю нужно быть а не устраивать локальный ад.

[bezvozni]

это схема зала, 16 рядов на 27 мест, пока хз как это сделать что бы понятно расположение мест было и адаптивно под телефон

[bezvozni]

strelok011, слушайте, ну вот же можно приблизить, кликнуть и увидеть всплывающее окно четко по центру видимой области, что значит "условно никак"? всмысле это не реализовать без сложно кода?

[bezvozni]

я наверно неврено сформулировал, не "модальное", а "всплывающее" окно
upd или всё таки модальное, сейчас читаю, разбираюсь ..

[bezvozni]

ну в целом пасибо за предостережения, буду думать и иметь в виду

[strelok011]

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

Возможно лучше продумать условные сектора, выбор места не кликом по карте, а в селекторах с отображением на миникарте... прямое решение а-ля десктоп, думаю, не стоит тут городить.
Вывели блоки 3х4 кресла, по клику подсветили, далее отображение отдельной формы с вводом всех данных. Всплывашку тут не вижу необходимости даже городить (это исключительно ИМХО, может у вас свои резоны, не знаю)
Желаю справиться с этой проблемой!