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

Форма + модальное окно

важность: 5

Создайте при помощи HTML/CSS форму для логина в модальном окне.

Требования:

  • Кнопки окна вне формы не работают (даже на левый край нажать нельзя).
  • Полупрозрачный голубой «экран» отстоит от границ на 20px.
  • Форма центрирована вертикально и горизонтально, её размеры фиксированы.
  • Посетитель может менять размер окна браузера, геометрия должна сохраняться.
  • Не ломается при прокрутке.

Браузеры: все основные, IE8+.

Открыть песочницу для задачи.

Структура решения

Шаги решения:

  1. Для того, чтобы элементы окна не работали, их нужно перекрыть DIV'ом с большим z-index.
  2. Внутри него будет лежать «экран» с полупрозрачностью. Чтобы он растягивался, можно дать ему position: absolute и указать все координаты top/left/right/bottom. Это работает в IE8+.
  3. Форму можно отцентрировать при помощи margin или display: table-cell + vertical-align на внешнем DIV.

Решение

Открыть решение в песочнице.