@Renhor

Модальное окно и 3 анимированные формы в нем. При нажатии на TAB все перемешивается, как исправить?

Сабж. Выложил на бесплатный хостинг renhor.zzz.com.ua

При нажатии на логин/регистрация открывается модальное окно. Работает так:
Первый контейнер - div для отрисовки затемненного фона.
Второй контейнер - в нем содержатся абсолютно позиционированные 3 формы справа от границы контейнера. При переключении между формами, этот контейнер принимает размеры текущей формы.

При навигации с помощью TAB сами можете увидеть что происходит.

Хотелось бы получить подсказки по решению, пока склоняюсь к тому что нужно:

1) При открытии модального окна - блокировать таб на главной странице (не знаю как).
2) Пока открыта текущая форма, таб должен работать только на ней.(не знаю как)

Под *не знаю как* подразумеваю - не знаю какие инструменты использовать и как их использовать.

Нашел в яндексе 2 полезные статьи, но оптимизировать под мой случай с тремя формами не смог.

Больше прошу не готовых решений (но если такие есть под МОЙ СЛУЧАЙ, то не откажусь и, думаю, разберусь), а подсказок и инструментов для решения (НЕ БИБЛИОТЕКИ, интересует чистый js).
  • Вопрос задан
  • 218 просмотров
Решения вопроса 1
DirecTwiX
@DirecTwiX
"display: flex;" уже предлагали?
Вот что нашёл:
Keep tabbing within modal pane only
В принципе, получилось. Вот результат:
https://codepen.io/DTX/pen/dVYgMZ

Можете попробовать очистить окошко js, чтобы посмотреть, как работает TAB без дописок.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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